The data of the component in vue has been updated, but the page has not been updated
Problem Description
After the parent component gets the data through the request, it processes the data in the parent component. After the processing is completed, it is passed to the child component for rendering through props. At this time, after the data is modified in the child component, the data is viewed and modified through vue Devtools, but The page doesn't refresh.
problem code
parent component code
// 父组件
<template>
<div>
<dataUpdate :multipleTable="data"></dataUpdate>
</div>
</template>
<script>
import dataUpdate from "./dataUpdate";
export default {
name: "",
data() {
return {
data: [{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-08',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-06',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-07',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}]
}
},
components: {
dataUpdate,
},
methods: {
initData() {
this.data.map((item,index) => {
item.checked = true;
})
}
},
created() {
this.initData();
}
}
</script>
subcomponent code
// 子组件
<template>
<el-table
ref="multipleTable"
:data="multipleTable"
tooltip-effect="dark"
style="width: 100%">
<el-table-column width="55">
<template slot="header">
<span>选择</span>
</template>
<template slot-scope="scope">
<el-checkbox v-model="scope.row.checked"></el-checkbox>
</template>
</el-table-column>
<el-table-column
label="日期"
width="120">
<template slot-scope="scope">{
{
scope.row.date }}</template>
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="120">
</el-table-column>
<el-table-column
prop="address"
label="地址"
show-overflow-tooltip>
</el-table-column>
</el-table>
</template>
<script>
export default {
props: {
multipleTable: {
type: Array,
required: true,
}
},
}
</script>
problem solving
1. Modify data through this.$set
In this way, the data refresh page can also be refreshed, but when there is a lot of data, the page will freeze.
2. Use forced refresh
Use this.$forceUpdate() method to force refresh.
3. Replace the data processing method.
The data of vue is bidirectionally bound. In the component, vue monitors the data through the observer mode, but in this problem, we modify the data in the form of attribute addition, so vue will have flaws in monitoring the added attribute , so there will be a problem that the component data is updated but the page is not refreshed.
Data modification method
After changing the data modification method, the data update page of the subcomponent will also be refreshed in time.
// 父组件
<template>
<div>
<dataUpdate :multipleTable="updataData"></dataUpdate>
</div>
</template>
<script>
import dataUpdate from "./dataUpdate";
export default {
name: "",
data() {
return {
data: [{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-08',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-06',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-07',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}],
updataData: [],
}
},
components: {
dataUpdate,
},
methods: {
initData() {
this.data.map((item,index) => {
// item.checked = true;
this.updataData.push({
date:item.date,
name:item.name,
address:item.address,
checked:true,
})
})
}
},
created() {
this.initData();
}
}
</script>