时间戳

首页 > 解决方案 > 事件函数内的数据对象不起作用并导致未定义

javascript - 事件函数内的数据对象不起作用并导致未定义

问题描述

当我将对象数据放入事件中时，我有一个未定义的值。

这是我的代码：

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

我希望有人帮助我。

标签： javascriptvue.jsvuejs2

解决方案

问题出在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>

推荐阅读