Parent component data updates child component related content has not changed
Parent component
In the parent component, v-for generates child components based on the data (array) given by the background (area).
<div class="exist"> <existProject :itemprop="item" v-for="(item, index) in getData" :key="index" :index="index" @click="sendIdTogetData(index)" v-show="true"></existProject> </div>
Subcomponent (existProject)
<template>
<!-- <transition name="el-zoom-in-center"> -->
<div class="existProjectBox" v-show="show2">
<div class="existContentBox">
<div class="existContent">
<div class="existTitle">{{}}</div>
<div class="stateBox">
<span class="state">{{ status_tit }}</span>
<span class="number" v-if="==2">Collected copies：{{}}share</span>
</div>
<div class="tiemBox">
{{createtime}}
</div>
</div>
</div>
<div class="existButton">
<li v-if="==0" @click="turnEdit()">
<i class="icon icon-edit"></i>
<span>edit</span>
</li>
<li v-if="==0" @click="turnSend()">
<i class="icon icon-send"></i>
<span>release</span>
</li>
<li v-if="==2 ">
<i class="icon icon-data"></i>
<span>data</span>
</li>
<!-- <li v-if="==2 ">
<i class="icon icon-data"></i>
<span>pause</span>
</li>
<li v-if="==2 ">
<i class="icon icon-data"></i>
<span>termination</span>
</li> -->
<li @click="delItem()">
<i class="icon icon-other"></i>
<span>delete</span>
</li>
</div>
</div>
<!-- </transition> -->
</template><script>
import axios from 'axios'
export default {
data(){w
return{
createtime:'',
status_tit:'',
show2:true
}
},
props:['itemprop'],
methods:{
turnEdit(id){
debugger;
(id)
['token'] = (('token'))
('/question/'+id)
.then(response => {
(response);
var obj = ;
var contents = ;
for(let i = 0; i < ; i++){
[i].component = this.$([i].type)
}
(obj)
('workInfoList', (obj));
this.$({
path: '/edit',
query: {
id: id
}
})
()
})
.catch(error => {
(error)
})
},
turnSend(id){
debugger;
(id)
['token'] = (('token'))
('/question/'+id)
.then(response => {
(response);
var obj = ;
(obj)
('workInfoList', (obj));
this.$({
path: '/sendProject',
query: {
id: id
}
})
()
})
.catch(error => {
(error)
})
},
delItem(id){
this.$confirm('This operation will delete the file into the draft box, will it continue?', 'hint', {
confirmButtonText: 'Sure',
cancelButtonText: 'Cancel',
type: 'warning'
})
.then(() => {
['token'] = (('token'))
('/question/'+id)
.then(response => {
(response)
// this.show2 = false
this.$();
})
})
.catch(error => {
(error)
})
},
initType(str){
switch(str){
case 1:return 'Radio';
case 2:return 'check';
case 3:return 'gapFill';
case 4:return 'level';
case 5:return 'photoInput';
case 6:return 'Rate';
case 7:return 'remark';
case 8:return 'selectChoice';
case 9:return 'sort';
case 10:return 'tableNumber';
case 11:return 'temp';
}
},
},
mounted(){
// ()
var transformTime = new Date()
= ();
()
},
}
</script>Because there are multiple pieces of data, there is paging processing. The data displayed on the first page is normal, but after obtaining the second page data and assigning it to the data of the parent component, the information of the child component is still retained on the first page information.
Solution: Use watch to listen in depth
watch:{
itemprop:{
handler(n,o){
();
var status = ;
var showCondition = ;
// debugger;
this.status_tit = (function(status,showCondition) {
if(status==0) {
return 'Not published';
}
if(status==2 && showCondition==1)
{
// Released return 'Collection';
}
if(status==2 &&showCondition==0)
{
// pause return 'Paused';
}
if(status==2 &&showCondition==-1) {
// Termination return 'Terminated';
}
if(status==2 &&showCondition==2) {
// The questionnaire is published return 'Ended';
}
})(status,showCondition)
},
deep:true,
immediate:true,
}
}Watch can monitor the data changes of subcomponents. Arrays or objects need to be listened in depth, and strings do not need to be listened in depth. This way, after switching data through paging, the original information will not be retained, but new information will be
Issue of not updating subcomponents in loops
Solution
This is a bug in Element-UI. The solution is to add a row-key attribute from the el-table and set a field name that can be uniquely identified for the row-key.
1. This can be the id field of the database
<el-table row-key="_id" ></el-table>
2. Add a random number key to the table
<el-table :key="()" ></el-table>
The above is personal experience. I hope you can give you a reference and I hope you can support me more.