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({&nbsp; el: "#app",&nbsp; created: function (){&nbsp; &nbsp; this.newData()&nbsp; },&nbsp; data() {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; info: [],&nbsp; &nbsp; }&nbsp; },&nbsp; &nbsp;&nbsp;&nbsp; computed:{&nbsp; &nbsp; hotSettings(){&nbsp; &nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; data: this.info,&nbsp; &nbsp; &nbsp; &nbsp; colHeaders: ['ID','Name',' pain'],&nbsp; &nbsp; &nbsp; &nbsp; rowHeaders: true,&nbsp; &nbsp; &nbsp; &nbsp; minRows: 2,&nbsp; &nbsp; &nbsp; &nbsp; minCols: 3,&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; },&nbsp; methods: {&nbsp; &nbsp; newData() {&nbsp; &nbsp; &nbsp; &nbsp;this.info =&nbsp; [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;["a", "b", "c"],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;["ra", "rb", "rc"]&nbsp; &nbsp; &nbsp; &nbsp;]&nbsp; &nbsp; &nbsp; // Handle Axios logic here&nbsp; &nbsp;}&nbsp;},&nbsp; components: {&nbsp; &nbsp; &nbsp;'hottable': Handsontable.vue.HotTable&nbsp; }});&nbsp;<div id="app">&nbsp; &nbsp;<HotTable :settings="hotSettings"></HotTable>&nbsp;</div>jsfiddle：https ://jsfiddle.net/hansfelix50/069s1x35/