Upon reviewing my code, I have noticed that the value shown in the data of the component does not match the desired value. The code snippet is provided below:
View.component('xxx-item',{
props:['item'],
template:`xxxx`,
computed:{
computedTest(){
return this.item.id
}
},
data:function(){
return{
test:this.item.id
}
}
}
This xxx-item component is used to display items in a list as demonstrated below:
<xxx-list v-for="item in xxxList" v-bind:item="item"></xxx-list>
I expected both this.test and this.computedTest values (representing this.item.id) to be the same. However, they differ at times. Why is that? What distinguishes between the values stored in data and computed?
The item data is populated using the following function:
function loading(){
axiox.get(xxx)
.then((res)=>{
let result = [];
for(let item of res.xxx.list){
let obj = {};
obj.id = item.id;
.............
.............
result.push(obj);
}
this.xxxList = result;
})
}