Vue.js 垃圾 javascript？

Question

我需要加载数据到一个动手table,

当我使用时：

案例：如果直接使用到数据中，效果很好，但是我需要在从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/

Vue.js 垃圾 javascript？

Vue.js crud javascript?

javascript

vue.js

axios

handsontable