在创建或挂载的钩子访问组件数据

Question

我正在为Vue.js写一个组件，我需要修改事件上的数据。但由于某些原因，当我访问它，它被设置为未定义

module.exports = { 
    data: function() { 
     return { 
      visible: true 
     } 
    }, 
    mounted: function() { 
     this.eventHub.$on('minimize', function(window_id) { 
      console.log(this.visible); 
      this.visible = !this.visible; 
     }); 
    }, 
    props: ["windowId"] 
} 

当事件被称为首次，data.visible是不确定的，因为某些原因。

有什么我做错了吗？

谢谢！

Answer 1

因为function (window_id)有它自己的范围，所以你不能访问this。

这可以通过添加self = this来解决。

let self = this 
this.eventHub.$on('minimize', function(window_id) { 
    console.log(self.visible); 
    self.visible = !self.visible; 
}); 

正如Nick Rucci指出的那样，您还可以使用箭头函数，并摆脱self = this。

this.eventHub.$on('minimize', (window_id) => { 
    console.log(this.visible); 
    this.visible = !this.visible; 
});