Vue.js crud javascript?

Question

I need to load data to a hands-on table,

When I use:

case: if used directly into data, its work good, but I need to load data when is created from Axios, using Axios. This doesn't work.

data: function() {
  return {
    info:[],
    hotSettings: {
      data: [['a','b','c'],['ra','rb','rc']],
    }
  }
}

case: if use in my variable info, it doesn't work either.

data: function() {
  return {
    info:[['a','b','c'],['ra','rb','rc']],
    hotSettings: {
      data: this.info,
    }
  }
}

case: using hook created. This doesn't work.

<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>

10 Rep · Accepted Answer · 2020-07-12 00:54:11Z

2

You can´t reference data properties between them, instead you can use a computed property to handle what you want:

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/

edited Jul 12, 2020 at 0:54

10 Rep

2,2687 gold badges21 silver badges34 bronze badges

answered Jul 12, 2020 at 0:49

Hans Felix Ramos

4,4543 gold badges19 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

10 Rep Over a year ago

Please don't link external sites, instead use the debugger built into SO. Thanks!

Hans Felix Ramos Over a year ago

see the fiddle @Carlos

Carlos Over a year ago

Hi @HansFelixRamos you can help me please whit this link

Collectives™ on Stack Overflow

Vue.js crud javascript?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related