Is it possible to call own Method in Vue data()?

Question

So I'm using Element Vue, I need to get access to a method or to the value of the acceptedDates

export default {
data() {
    return {
        acceptedDates: [],

        pickerOptions1: {
            disabledDate(time) {
                return moment(time).isBetween(this.acceptedDates[0], this.acceptedDates[1]);

            }
        }
    };
},
methods: {
    //setting acceptedDates method...
}

I get a ReferenceError for this.accptedDates or even without using this. How do you do this?

Update Thank you for the first anwsers, but I still can't figure it out. I created this fiddle for you to see: https://jsfiddle.net/05nru5xq/13/

If you go to http://element.eleme.io/#/en-US/component/date-picker you will find that disabledDate is a Function in PickerOption.

data is only to specify variables and it's default values, you have methods and computed to actually process the data, plus you have mounted() or beforeMounted() to initialize anything you might need — balexandre
– balexandre, Commented Feb 24, 2018 at 11:00
might now do what you really want, but can be a starting point for how to interact with all methods tpcg.io/rswWYN - just click "preview" and then change the first date to 2018-01-20 for example — balexandre
– balexandre, Commented Feb 24, 2018 at 11:39
@balexandre I can't use mounted in that case, because the parent component is changing all the time but the component it self is not created again. So thus I would only be called once. — Philipp Mochine
– Philipp Mochine, Commented Feb 24, 2018 at 13:04
@balexandre I liked your example, but I have a fixed method name disabledDate because of Vue Element. Maybe you could look up my jsfiddle.net/05nru5xq/13 to see what I mean. Thank you! — Philipp Mochine
– Philipp Mochine, Commented Feb 24, 2018 at 13:06

balexandre · Accepted Answer · 2018-02-24 20:01:05Z

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

answered Feb 24, 2018 at 20:01

balexandre

75.5k47 gold badges240 silver badges352 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Philipp Mochine Over a year ago

Thank you! Worked really great! To your points: I was like in a hurry (my gf moved in haha) and could not really check all my mistakes. But I never use capital name for methods and I see the the mistake as well with today. But thank you again! And thank you for the Udemy course link! I'll show into it

test · Accepted Answer · 2018-02-24 11:48:58Z

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/

answered Feb 24, 2018 at 11:48

test

4211 gold badge5 silver badges15 bronze badges

1 Comment

Philipp Mochine Over a year ago

Thank you for your answer! Maybe I'm too tired to see you the solution, but I want to show you my jsfiddle: jsfiddle.net/05nru5xq/13 . I need to use a function in pickerOptions1, so I'm not able to see how I can use my methods in there.

Collectives™ on Stack Overflow

Is it possible to call own Method in Vue data()?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related