为什么我无法从闭包访问vuejs实例变量？

我想学习vue 2，但我被卡住了，有人可以帮我解释为什么我无法在事件关闭中访问这个组件？在控制台中没有错误认为它不会呈现为什么我无法从闭包访问vuejs实例变量？

也许无用的信息：通天的WebPack，VUE装载机，事件总线的工作虽然不是第一次了，我supose该组件没有创建依旧，但我认为这不是真正的问题

<template> 
    <div class="w3-row-padding"> 
     <div class="w3-pannel">{{categoryName}}</div> 
     <categoria-admin v-for="number in 9"></categoria-admin> 
    </div> 
</template> 




<script> 

    import Bus from '../Classes/Bus'; 

    export default { 

     data: function() { 
      return { 
       //Bind vari to template doesn't work either 
       vari: "varivari" 
      }; 
     }, 
     //tried with oncreate too 
     mounted: function() { 
      this.vari = "foo";//it works 
      // I tried with es5 passing this through a variable, doesn't work either 
       Bus.$on('categoria-item-selected', (category) => { 
        console.log("entering closure");// this get printed 
        this.vari = "ha funcionado" // doesn't work 
        this.updateVari('ha funcionado');// doesnt work 
        console.log(this.vari); // prints ha funcionado , but in template 
              //is not reflected and with chrome tool either 
       }); 
     }, 
     computed: { 
      categoryName : function() { 
       return this.vari; 
      } 
     }, 
     methods: { 
      updateVari: function (value){ 
       this.vari = value; 
      } 
     } 


    } 
</script>

来源

2017-05-14 Murkas

巴士是什么？它是一个Vue对象吗？如果你在事件处理程序中使用console.log（this），它会记录什么？ – Bert

我不能再现它。你的代码似乎很好地工作：

（点击一个按钮发出的事件，那么变量将改变 - 上述按钮通知文本）

const bus = new Vue({}); 
 

 
new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    foldersList: [{id: 1, name: 'first'}, {id: 2, name: 'second'}], 
 
    foldersStatus: true 
 
    }, 
 
    methods: { 
 
    emitMe: function() { 
 
    bus.$emit('myevent'); 
 
    } 
 
    }, 
 
    components: { 
 
    'child' : { 
 
     template: `<p>{{ vari }}</p>`, 
 
     data: function() { 
 
     \t return { 
 
      vari: 'varivari' 
 
     } 
 
     }, 
 
     mounted() { 
 
     \t this.vari = "foo"; 
 
     bus.$on('myevent', (category) => { 
 
      console.log("entering closure");// this get printed 
 
      this.vari = "ha funcionado"; 
 
     }) 
 
     } 
 
    } 
 
    } 
 
});

<script src="https://unpkg.com/vue/dist/vue.js"></script> 
 

 
<div id="app"> 
 
    <child></child> 
 
    <button @click="emitMe()">Emit</button> 
 
</div>

通常，当您遇到这样的问题，你应该将当前的this保存到这样一个变量：const self = this并在异步回调等中引用self。但在这种情况下，它似乎工作正常，this保持不变。

来源

2017-05-14 18:16:45 wostex

为什么我无法从闭包访问vuejs实例变量？

回答

相关问题