javascript - Vue.js crud javascript？

Question

我需要将数据加载到动 watch 中，

当我使用时:

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. 案例:使用创建的钩子(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>

Answer 1

您不能在它们之间引用数据属性，而是可以使用计算属性来处理您想要的:

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/