Question

全部：

我对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值，但有趣的部分是：计算出的{{1 }}在datas之前不会更新，因此道具仍然是旧道具。

我想知道如何控制订单吗？

当涉及到“为什么不使用Vuex或观看道具”时，我不断收到“未捕获的TypeError：无法分配为只读属性监视...”

Answer 1

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

如何在Vue.js中更新计算变量

1 个答案: