Как загрузить данные в handsontable, используя Vue на смонтированных или созданных хуках жизненного цикла? - PullRequest
Новая
       82

Как загрузить данные в handsontable, используя Vue на смонтированных или созданных хуках жизненного цикла?

2 голосов
/ 11 июля 2020

Мне нужно загрузить данные в практическую таблицу,

Когда я использую:

  1. case: если используется непосредственно в данных, он работает хорошо, но мне нужно загрузить данные, когда они созданы из Ax ios, используя Ax ios. Это не работает. 
data: function() {
  return {
    info:[],
    hotSettings: {
      data: [['a','b','c'],['ra','rb','rc']],
    }
  }
}
случай: если использовать в моей информации о переменной, он тоже не работает. 
data: function() {
  return {
    info:[['a','b','c'],['ra','rb','rc']],
    hotSettings: {
      data: this.info,
    }
  }
}
case: using hook создан. Это не работает. 
<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>

1 Ответ

1 голос
/ 12 июля 2020

Вы не можете ссылаться на свойства данных между ними, вместо этого вы можете использовать вычисленное свойство для обработки того, что вы хотите: 

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/

...