[Vuejs]-How to append axios data with good table in vue

by

2👍

✅

To “append axios data” you have to install axios first in your project.

So first install axios to your project:

npm install --save axios

Then transform your next method into the follow:

  next() {
    axios.get('http://localhost:3000/api/companyproducts')
      .then(response => {
         this.rows = response.data
      }) 
      .catch(error => console.log(error))
  }

Note that you have also to import axios.So when the script tag starts use:

import axios from 'axios'

Axios is a great package you can learn more here

As i can see in your code you are not using axios but vue-resource.Vue-resource is also good package so you can learn more here

👤Roland

2👍

I’m guessing with the code you have, the view does not respond after the http.get completes.

You may be able to do it by configuring rows as a computed property, since this watches it’s dependents (i.e row_data) for changes

computed: {
  rows: function () { 
    return this.row_data;
  }
}
...
data(){
  return {
    columns: [
    ...
    ],
  row_data:[]
 };
}
...
methods: {
  next() {
    var _this=this
    this.$http.get('http://localhost:3000/api/companyproducts')
      .then(function (response) {
         _this.row_data = response.data
      })  
  }
}
...
created: function() {
  this.next()
}
👤Richard Matsen

Leave a comment