Vue.js crud javascript？

Question

我需要将数据加载到动手操作表中，当我使用：案例：如果直接用于数据，它的工作很好，但我需要在从 Axios 创建时加载数据，使用 Axios。这行不通。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,    }  }}案例：使用创建的钩子。这行不通。<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/