【vue2】解决handsontable无法更新data数组的问题

问题描述

无论如何更新hotSettings的data，其都不会重新渲染data，即使输出的data已经更新。

看代码：
子组件CSVPreview

data() {
    
    
  return {
    
    
      hotSettings: {
    
    
          data: [[]],
       }
  }
},
//通过方法初始化数据
methods: {
    
    
    init(data) {
    
    
        this.hotSettings.data = data;
        console.log(this.hotSettings.data);
    }
},

父组件form
1.引入子组件

<CSVPreview ref="CSVPreview" :tripleData="this.previewData"></CSVPreview>

2.方法中传递数据

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);
	},
}

结果：
获取不到数据

思路

通过v-if先不渲染handsontable组件。当我们通过父组件准备好数据到props后，再渲染handsontable组件，这样子组件在created钩子函数的时候就能获取到正确的数据了

问题解决

子组件CSVPreview

//props是关于父子间通信用的，父子间通信详情看我相关博客
props:['tripleData'],
data() {
    
    
  return {
    
    
      hotSettings: {
    
    
          data: this.tripleData, 
       }
  }
},
//通过方法初始化数据
methods: {
    
    
    init() {
    
    
        this.hotSettings.data = this.tripleData;
    }
},

父组件form
1.引入子组件

<CSVPreview ref="CSVPreview" :tripleData="this.previewData" v-if="this.isPreview"></CSVPreview>

2.方法中传递数据

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;
	},
}

结果：

成功获取