如何在已安装或已创建的生命周期挂钩上使用Vue将数据加载到handontable? [英] How to load data to handsontable using Vue on mounted or created lifecycle hooks?

问题描述

我需要将数据加载到动手操作表上，

I need to load data to a hands-on table,

当我使用时:

1. 案例:如果直接用于数据中，它的工作效果很好，但是当我使用Axios从Axios创建数据时，我需要加载数据.这是行不通的.

data: function() {
  return {
    info:[],
    hotSettings: {
      data: [['a','b','c'],['ra','rb','rc']],
    }
  }
}

1. 情况:如果在我的变量信息中使用它，也将不起作用.

data: function() {
  return {
    info:[['a','b','c'],['ra','rb','rc']],
    hotSettings: {
      data: this.info,
    }
  }
}

1. 情况:使用创建的钩子.这是行不通的.

<template>     
   <div>
     <hot-table ref="hotTableComponent" :settings="hotSettings"></hot-table>
   </div>
</template>
     
<script>
import { HotTable } from '@handsontable/vue';
import Handsontable from 'handsontable';
    
export default {
  created: function (){
    this.newData()
  },
  data: function() {
    return {
      info:[],
      hotSettings: {
        data: this.info,
        colHeaders: ['ID','Name',' pain'],
        rowHeaders: true,
        minRows: 2,
        minCols: 3,
      }
    }
  },
  methods: {
    newData() {
      //dont work 1rs,
      this.info = ['a','b','c'],['ra','rb','rc']];
    
      // don't work, change 2dn 
      // let urlsecciones = 'seccion/show';
      // axios.get(urlsecciones).then(response => {
      //        this.info = response.data;
      //        console.log(response.data) // run good
      // });
     }
  },        
    components: {
      HotTable
    }
  }
</script>

推荐答案

您不能在它们之间引用数据属性，而可以使用计算属性来处理所需的内容:

You can´t reference data properties between them, instead you can use a computed property to handle what you want:

new Vue({
  el: "#app",
  created: function (){
    this.newData()
  },
  data() {
    return {
      info: [],
    }
  },    
  computed:{
    hotSettings(){
      return {
        data: this.info,
        colHeaders: ['ID','Name',' pain'],
        rowHeaders: true,
        minRows: 2,
        minCols: 3,
      }
    }
  },
  methods: {
    newData() {
       this.info =  [
         ["a", "b", "c"],
         ["ra", "rb", "rc"]
       ]
      // Handle Axios logic here
   }
 },
  components: {
     'hottable': Handsontable.vue.HotTable
  }
});

 <div id="app">
   <HotTable :settings="hotSettings"></HotTable>
 </div>

Jsfiddle: https://jsfiddle.net/hansfelix50/069s1x35/

Jsfiddle: https://jsfiddle.net/hansfelix50/069s1x35/

这篇关于如何在已安装或已创建的生命周期挂钩上使用Vue将数据加载到handontable?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！