なぜ閉鎖からvuejsインスタンス変数にアクセスできないのですか？

Question

私はvue 2を学ぼうとしていますが、私は立ち往生しています。誰かがイベント終了でこのコンポーネントにアクセスできない理由を教えてくれますか？コンソールで エラーが、それは

おそらく役に立たない情報をレンダリングされませんと思ったん： バベル、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> 

Answer 1

私はそれを再現できません。あなたのコードが正常に動作するようです：

（あなたのイベントを発するように、ボタンをクリックして、変数の値が変更されます - ボタンの上の通知テキストを）あなたが経験

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>

しばしば

、このような問題は、const self = thisのような変数に現在のthisを保存し、非同期コールバックなどでselfを参照する必要があります。ただし、この場合は正常に動作し、thisは変わりません。