Question

我遇到了问题：

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

{{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;
        });
    }
},

如果value中的listitem发生了变化，则子级value被设置为false或true。

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

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

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

Answer 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不鼓励在子级组件中更改道具。

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

1 个答案: