我特别关注Vue Js的问题,希望有人能指出我正确的方向。我正在使用与Pusher连接的Laravel的Echo功能。我目前正在从推动器获取数据,这部分是好的和花花公子。我似乎无法弄清楚的问题是客户端代码。我尝试将来自推送器的新项目添加到我页面上已有的项目中。但是,当我在Echo通道块中使用this.items.push()时,我收到一个带有TypeError的控制台错误:无法读取属性' push'未定义的。我在想#34; 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>
答案 0 :(得分:1)
this
内的Echo.channel
更改范围,您已将this
保存在其他变量中并使用该变量而不是this
,这就是为什么它在Echo.channel
之外完美运行{ {1}}但this.items
内的内容为null,因此会抛出错误。您需要进行以下更改:
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')
});
}