Article Directory
Problem Description
No matter how you update the data of hotSettings, it will not re-render the data, even if the output data has been updated.
Look at the code:
subcomponent CSVPreview
data() {
return {
hotSettings: {
data: [[]],
}
}
},
//通过方法初始化数据
methods: {
init(data) {
this.hotSettings.data = data;
console.log(this.hotSettings.data);
}
},
Parent component form
1. Introduce child components
<CSVPreview ref="CSVPreview" :tripleData="this.previewData"></CSVPreview>
2. Pass data in the method
data() {
return {
previewData:[[]],
}
methods:{
//异步处理保证我先获取二维数组再赋值给子组件handsontable
async previewFile(row) {
const arr = await return axios.get("url").then((res)=>{
return Promise.resolve(res.data);
})
this.$refs.CSVPreview.init(data);
},
}
Result:
no data can be obtained
train of thought
The handsontable component is not rendered through v-if. After we prepare the data to props through the parent component, we render the handsontable component, so that the child component can get the correct data when the hook function is created
problem solved
Subcomponent CSVPreview
//props是关于父子间通信用的，父子间通信详情看我相关博客
props:['tripleData'],
data() {
return {
hotSettings: {
data: this.tripleData,
}
}
},
//通过方法初始化数据
methods: {
init() {
this.hotSettings.data = this.tripleData;
}
},
Parent component form
1. Introduce child components
<CSVPreview ref="CSVPreview" :tripleData="this.previewData" v-if="this.isPreview"></CSVPreview>
2. Pass data in the method
data() {
return {
isPreview: false,
//父子组件间传递数据用，关于父子间通信可以看我博客
previewData: this.tripleData,
}
methods:{
//异步处理保证我先获取二维数组再赋值给子组件handsontable
async previewFile(row) {
const arr = await return axios.get("url").then((res)=>{
return Promise.resolve(res.data);
})
//先准备好数据，然后开始渲染子组件，这样子组件在created钩子函数的时候就能获取到正确的数据了
this.previewData = arr;
this.isPreview = true;
},
}
Result:
successfully obtained