如何在Vue.js中更新计算变量
如何在Vue.js中更新计算变量
提问于 2018-06-23 02:34:04
全部：
我是Vue的新手，有一个问题让我很困惑：
我将Vue实例定义为事件总线，如下所示：
var bus = new Vue({
data:{
list:[]
},
methods:{
getUpdatedList(){
var bus = this;
LIST_AJAXRequest.then(function(updatedList){ bus.list = updatedList); bus.$emit("NEW_DATA") })}
}
})并在如下组件中使用此事件总线：
Vue.component("list-item",{
template:"<div><input :value='myitem.value' @input='' /></div>",
props:["item"],
data(){
return { myitem : this.item }
},
methods:{
sendUPDATE_AJAXRequest(){ // API request to update this list item}
},
created(){
var vm = this;
bus.$on("NEW_DATA", function(){vm.myitem = Object.assign({},vm.item);} )
}
})
Vue.component("data-list",{
template:"<div> <list-item v-for='i in datas' :item="i" </div>",
data(){
return {}
},
computed:{
datas(){ return bus.list }
}
})以上只是代码的重要部分。基本上，我想要做的是发送LIST_AJAXRequest来获取要显示的项的列表，并且可以通过sendUPDATE_AJAXRequest更新每个列表项的值，然后调用LIST_AJAXRequest来获取新的列表。因此更新可以反映在页面上的列表上。
问题是：在LIST_AJAXRequest触发并返回之后，正如你所看到的，我把updatedList给了bus.list，并通知listitem通过发出一条消息来更新它的myitem值，但有趣的是:计算出的datas没有在bus.$on("NEW_DATA"之前更新，所以项目属性仍然是旧的。
我想知道如何控制订单?
当谈到“为什么不使用Vuex或手表属性”时，我总是得到“未捕获的TypeError:无法分配给只读属性手表...”
回答 1
Stack Overflow用户
发布于 2018-06-23 03:13:13
1-使用箭头函数，不需要将this关键字放入另一个变量。
2-请阅读this文章《事件总线如何工作》
在发出请求的组件中：
send_request () {
axios.put('url_here', { data_here })
.then(response => eventbus.$emit('data_updated', response.data))
}在您想要侦听该事件的组件中：
created() {
eventBus.$on('data_updated', data => {
console.log(data);
})
}在这个例子中，我使用了axios，我推荐使用它。Take a look
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50993832
复制相关文章
相似问题