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') 
       }); 
     }