how to append axios data with good table in vue

Question

guys, I m new to Vue so don't know how to solve this let me first show code then the problem, I m using Vue-Good-table here is link https://xaksis.github.io/vue-good-demos/#/simple-table

<vue-good-table
  title="Product List"
  :columns="columns"
  :rows="rows"
  :paginate="true"
  :lineNumbers="true" />

export default {
data(){
return {
  columns: [
    {
      label: 'productname',
      field: 'product_name',
      filterable: true,
    },
    {
      label: 'productdesc',
      field: 'product_desc',
     // type: 'number',
      html: false,
      filterable: true,
    },

  ],
  rows:[],//get axios return value
 };
},
 methods:{
  next() {
    var _this=this
     this.$http.get('http://localhost:3000/api/companyproducts')
            .then(function (response) {

           _this.rows=response.data
            })
            .catch(function (error) {

                });
    }
  }
}

now my problem is that how i can append this axios responded value with rows of good table

I will mention that you are replacing the content of the table with this call, NOT appending. To append, use the rows.push( response.data ) method. — parker_codes
– parker_codes, Commented Mar 31, 2018 at 19:21

Roland · Accepted Answer · 2018-04-01 08:13:49Z

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

edited Apr 1, 2018 at 8:13

answered Mar 31, 2018 at 12:30

Roland

28.1k9 gold badges108 silver badges103 bronze badges

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

Comments

Richard Matsen · Accepted Answer · 2018-03-31 18:24:20Z

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()
}

edited Mar 31, 2018 at 18:24

answered Mar 31, 2018 at 10:27

Richard Matsen

20.9k3 gold badges59 silver badges85 bronze badges

2 Comments

Rocky Over a year ago

next() method not get trigger therefore i di not getting data

Richard Matsen Over a year ago

Ok, do you know about lifecycle hooks? You can trigger next() in the created() hook.

Collectives™ on Stack Overflow

how to append axios data with good table in vue

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related