Laravel Echo Vue Js TypeError：無法讀取屬性'推'的undefined

Question

我有一個問題，特別是Vue Js希望有人能指出我在正確的方向。我正在使用連接到Pusher的Laravel的Echo功能。我目前正在從推動者那裏獲得數據，該部分很好，並且很漂亮。我似乎無法弄清楚的問題是客戶端代碼。我正在嘗試將來自推送器的新項目添加到我的頁面上已有的項目中。但是，當我在Echo通道塊中使用this.items.push（）時，我收到TypeError的控制檯錯誤：無法讀取未定義的屬性'push'。我在想「this.items」超出範圍？

<div id="app"> 
    <ul id="example-1"> 
     <li v-for="item in items"> 
      @{{ item }} 
     </li> 
    </ul> 
</div> 

<script> 
    new Vue({ 

     el: '#app', 

     data: { 
      items: [] 
     }, 
     mounted: function() { 
      this.listen(); 
     }, 

     methods: { 
      /** 
      * Listen to the Echo channels 
      */ 
      listen: function() { 

       // pushed fine from here 
       this.items.push("dddd"); 

       Echo.channel('test_channel') 
        .listen('OrderCreated', function(e) { 
         //TypeError: Cannot read property 'push' of undefined 
         this.items.push('elkqwejfh') 
        }); 
      } 
     } 
    }); 
</script> 

Answer 1

內Echo.channelthis變化範圍，你在一個不同的變量都保存this並使用該變量中，而不是this，這就是爲什麼它完美地外Echo.channel工作，但裏面this.items爲空，所以它拋出錯誤。您需要進行以下更改：

methods: { 
     /** 
     * Listen to the Echo channels 
     */ 
     listen: function() { 

      // pushed fine from here 
      this.items.push("dddd"); 
      var self = this 
      Echo.channel('test_channel') 
       .listen('OrderCreated', function(e) { 
        //TypeError: Cannot read property 'push' of undefined 
        self.items.push('elkqwejfh') 
       }); 
     }