[Vuejs]-Is it possible to call own Method in Vue data()?

1👍

Now that I know exactly what you are after, I’ve updated accordingly to your example https://jsfiddle.net/05nru5xq/31/

some points on your code:

  • never use capital to name methods, capital letter first is to name Object that can be created with the new attribute;

  • today is not a moment object so you can’t call isBetween on it

  • from the docs you need to name your options as there’s 3 of them, hence specifying the option :picker-options="{ disabledDate: betweenOneWeek }"

  • data is just a place to hold variables, don’t put methods there.

As a side note:

I’ve done the same (bought it for me) and I’m not in any way affiliated with them, just a happy customer. If you want to know VueJs well enough and quick, try this Udemy course, it’s pretty good and worth all the money

1👍

In the data section you can define variables with functions but you’re not able to do things like you did. Why? It’s simple. You’re using this which binding to pickerOptions1 object, not data. Even when you use arrow function in object it won’t work as well because in that case it will return window object.
Those operations on data you can move to separate function and in my opinion it would be the best way.

For example you can do something like that:

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    customMessage: 'Test ',
    testFunction() {
        this.customMessage += this.message;
        alert(this.customMessage);
    }
  },
  mounted() {
    this.testFunction();
  }
})

https://jsfiddle.net/mxuh7c9p/

or more suitable to your case:

new Vue({
  el: '#app',
  data: {
    acceptedDates: [],
    pickerOptions1: null,
  },
  methods: {
    getDisabledDate(time) {
        return moment(time).isBetween(this.acceptedDates[0], this.acceptedDates[1]);
    },
    setAcceptedDates() {
      const disabledDate = this.getDisabledDate(time);
        // do something
    }
  },
  mounted() {
  //this.getDisabledDate();
  }
})

https://jsfiddle.net/mxuh7c9p/13/

👤test

Leave a comment