CODEWITHSUNDEEP
vue.jsvuejs2
SPQRInc
SPQRInc

Reputation: 198

Model does not get updated on custom component

I got a problem:

I included a custom component like that:

{{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>

So now there's an edit component:

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

Inside this edit component, there's a watcher:

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

        let vm = this;

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

If the value of the listitem changes, the value of the child is set to false or true.

These changes are reflected in {{item.lists}} in my parent view. But 

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

does not show the changes. It sticks to the old values.

Upvotes: 0

Views: 85

Answers (1)

ittus
ittus

Reputation: 22403

It can be Vue reactivity problem.

You can try use Vue.set

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

The better way is emitting an event to parent and change data in parent since Vue doesn't encourage to mutate props in children component.

Upvotes: 1

Related Questions