模型未在自定义组件上更新答案

【问题标题】：Model does not get updated on custom component模型未在自定义组件上更新
【发布时间】：2019-07-17 21:21:59
【问题描述】：

我遇到了问题：

我包含了一个这样的自定义组件：

{{item.lists}}
<div v-for="(listitem, index) in item.lists" :key="index"
     class="media align-items-center bg-white ui-bordered py-3 mb-2">
    <div class="component-move ion ion-ios-move text-muted text-big p-4"></div>

    <div class="media-body">
        <div class="container mt-2">
            <div class="row">
                <viewlist :item="listitem" :name="`${listitem.id}-${index}`"/>
            </div>
        </div>
    </div>
</div>

所以现在有一个edit 组件：

<editlistitem :name="item" :item="ListItem"/>

在这个编辑组件内部，有一个观察者：

watch: {
    'item.value': function (value) {

        let vm = this;

        _.each (vm.item.children, function (child) {
            child.id === value ? child.value = true : child.value = false;
        });
    }
},

如果listitem 的value 发生变化，则孩子的value 设置为false 或true。

这些更改反映在我父视图的{{item.lists}} 中。但是

<viewlist :item="listitem" :name="`${listitem.id}-${index}`"/>

不显示更改。它坚持旧的价值观。

【问题讨论】：

标签： vue.js vuejs2

【解决方案1】：

可能是 Vue 反应性问题。

你可以试试Vue.set

_.each (vm.item.children, (child, index) => {
     const newChild = {...child, value: child.id === value }
     vm.$set(vm.item.children, index, newChild)
});

更好的方法是向父组件发送事件并更改父组件中的数据，因为 Vue 不鼓励在子组件中改变 props。

【讨论】：