Data Object Inside The Event Function Doesn't Work And Resulted To Undefined

I'm having an undefined value when I put my object data inside the event. Here are my codes: data(){ return { eventSources: [], myId: 1 } }, methods:{ myMe

Solution 1:

The problem is this inside events() is not actually your Vue instance. You can fix the context by declaring events as an arrow-function:

this.eventSources = [{
  events: (start,end,timezone,callback) => {
    alert(this.myId);
  }
}]

newVue({
  el: '#app',
  data() {
    return {
      eventSources: [],
      myId: 1
    };
  },
  methods: {
    myMethod() {
      this.eventSources = [{
        events: (start,end,timezone,callback) => {
          alert(this.myId);
        }
      }]

      this.eventSources[0].events(0, 1, 'UTC', data =>console.log(data))
    }
  }
})

<scriptsrc="https://unpkg.com/vue@2.5.16"></script><divid="app"><button @click="myMethod">Click</button></div>