Trying to use imported functions in vue template

You are importing date-fns functions from vue-date-fns which is a utility that uses date-fns functions to create a filter to format dates…

change your import to the below

import {
      getTime,
      startOfDay,
      endOfDay,
      startOfWeek,
      endOfWeek,
      startOfMonth,
      endOfMonth,
      startOfYear,
      endOfYear,
      } from 'date-fns';

now the functions should be at your disposal as your importing them from date-fns instead.

next create a vue method as in the example below

methods: {
    getStartOfDay() {
      return getTime(startOfDay(new Date()));
    }
  }

and call getStartOfDay() in your template as below

<ais-numeric-menu
        attribute="created_at_unix"
        :items="[
          { label: 'All Time' },
          { label: 'Today', start: getStartOfDay()
1 Like

Thanks for your answer! Tried it like you said but no success get the following vue warn:

Property or method "startOfDay" is not defined on the instance but referenced during render

Please share your template code…

1 Like

should be your vue method getStartOfDay()

1 Like

Sry was my fault :slight_smile: thanks

one last thing to add… instead of calling new Date() multiple times in your template, and then using methods, you could create a vue data property called currentDate for example and then use computed properties instead of methods.

data() {
   currentDate: new Date()
},
computed: {
   theStartOfDay() {
      return getTime(startOfDay(this.currentDate));
    },
  theEndOfDay() {
      return getTime(endOfDay(this.currentDate));
    },
}

template would be

<ais-numeric-menu
        attribute="created_at_unix"
        :items="[
          { label: 'All Time' },
          { label: 'Today', start: theStartOfDay,   end: theEndOfDay },
1 Like

Thank you so much works like a charm :wink:

The methods work now but I dont get results :smiley:

are you using computed properties or methods?

i was missing “this.” before currentDate in computed… i fixed the above example, check the edit

1 Like

I am using methods

please share your method

1 Like
<script>
// Include only the reset
import 'instantsearch.css/themes/reset.css';
import algoliasearch from 'algoliasearch/lite';
import { VueAutosuggest } from 'vue-autosuggest';
import {
  getTime,
  startOfDay,
  endOfDay,
  startOfWeek,
  endOfWeek,
  startOfMonth,
  endOfMonth,
  startOfYear,
  endOfYear,
} from 'date-fns';

  export default {
    components: { VueAutosuggest },
    data() {
      return {
        searchClient: algoliasearch(
          '',
          '5d54e4a85cc99b96893a398889592667'
        ),
        query: '',
        key: '',
      };
    },
    methods: {
      onSelect(selected) {
        if (selected) {
          this.query = selected.item.title;
        }
      },
      indicesToSuggestions(indices) {
        return indices.map(({ hits }) => ({ data: hits }));
      },
      location: function() {
      	console.log(this.key);
      },
      getStartOfDay() {
        return getTime(startOfDay(new Date()));
      },
      getEndOfDay() {
        return getTime(endOfDay(new Date()));
      },
      getStartOfWeek() {
        return getTime(startOfWeek(new Date()));
      },
      getEndOfWeek() {
        return getTime(endOfWeek(new Date()));
      },
      getStartOfMonth() {
        return getTime(startOfMonth(new Date()));
      },
      getEndOfMonth() {
        return getTime(endOfMonth(new Date()));
      }
    },
    filters: {
        truncate: function(value) {
          if (value && value.length > 20) {
              value = value.substring(0, 200) + '...';
          }
          return value;
        }
    },
  };
</script>

My template with methods

    <ais-numeric-menu
        attribute="created_at_unix"
        :items="[
          { label: 'Alle' },
          { label: 'Heute', start: getStartOfDay(),   end: getEndOfDay() },
          { label: 'Woche',  start: getStartOfWeek(),  end: getEndOfWeek() },
          { label: 'Monat', start: getStartOfMonth(), end: getEndOfMonth() },
        ]"
        />

seems like you’re code is correct but it might be that you’re not using the passed props correcting in ais-numeric-menu component… do some debuging… add some console logs in the methods and add a mounted method with console logs to output the value of the props… or better if you have the vue browser extension, take a screenshot of the ais-numeric-menu component props… would also help if you share that component.

1 Like

expand the 2nd item in the items Array

1 Like

vue

this looks ok… what’s not working for you?

1 Like

The problem is the widget does not really work, so nothing gets sorted after date ;( Dont know why for me everything looks fine

it’s hard to tell what’s wrong… can you create a sample on codepen?

1 Like