事件函数中的数据对象不起作用，并导致未定义

Question

将对象数据放入事件中时，我的值不确定。

这是我的代码：

data(){
    return {
       eventSources: [],
       myId: 1
    }
},
methods:{
   myMethod(){
     this.eventSources = [{
          events(start,end,timezone,callback){
              alert(this.myId); 
              axios.get(`/Something?id=${this.myId}`).then(response=>{
                  callback(response.data);
              }).catch(error=>{console.log(error);});
          }
     }]
   }
}

我的警报导致undefined但是当我将警报置于this.eventSources = [{...]]上方时，警报的值为1

我希望有人能帮助我。

Answer 1

问题是this里面events()实际上不是你的Vue的实例。 您可以通过将events声明为箭头函数来修复上下文：

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

 new Vue({ 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)) } } }) 

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