[Vuejs]-Vue , value is different in Component between data and computed?

by

2👍

✅

Vue will reuse components whenever possible during re-renders. This means if you add, remove or reorder items in xxxList, then some of the <xxx-item> components will be bound to different items. The computed property computedTest will update to reflect this change, but the data property test will not change because it was set only once at the component’s instantiation.

You need to use key on <xxx-item> to ensure that the same component instance is used for the same item in the array.

e.g.

<xxx-item v-for="item in xxxList" :key="item.id" :item="item">

When Vue is updating a list of elements rendered with v-for, by default it uses an "in-place patch" strategy. If the order of the data items has changed, instead of moving the DOM elements to match the order of the items, Vue will patch each element in-place and make sure it reflects what should be rendered at that particular index.

👤Decade Moon

1👍

If the value of the item prop has been changed, only the computedTest computed property will be updated but your test data property will not.

You will need to use watcher to enable your test data property to be updated every time the item prop is changed.

watch: {
    item: function(item) {
        this.test = item.id
    } 
}

or 

View.component('xxx-item',{
    props:['item'],
    template:`xxxx`,
    computed:{
        computedTest(){
          return this.item.id
        }
    },
    data:function(){
        return{
            test:this.item.id
        }
    },
    watch: {
        item: function(item) {
            this.test = item.id
        } 
    }
}
👤Julian Paolo Dayag

Leave a comment