как добавить данные axios с хорошей таблицей в vue

ребята, я новичок в Vue, поэтому не знаю, как решить эту проблему, позвольте мне сначала показать код, а затем проблему, я использую Vue-Good-table вот ссылка 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) {

                });
    }
  }
}

теперь моя проблема в том, как я могу добавить это значение ответа axios строками хорошей таблицы


vue.js vue-tables-2
person Rocky    schedule 31.03.2018    source источник
comment
Я отмечу, что вы заменяете содержимое таблицы этим вызовом, а НЕ добавляете. Для добавления используйте метод rows.push( response.data ).   -  person parker_codes    schedule 31.03.2018

Ответы (2)


arrow_upward
2
arrow_downward

Чтобы «добавить данные axios», вы должны сначала установить axios в свой проект.

Итак, сначала установите axios в свой проект:

npm install --save axios

Затем преобразуйте свой следующий метод в следующий:

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

Обратите внимание, что вам также необходимо импортировать аксиомы, поэтому при запуске тега скрипта используйте:

import axios from 'axios'

Axios - отличный пакет, вы можете узнать больше здесь

Как я вижу в вашем коде, вы используете не axios, а vue-resource. Vue-resource также является хорошим пакетом, так что вы можете узнать больше здесь

person roli roli    schedule 31.03.2018

arrow_upward
2
arrow_downward

Я предполагаю, что с помощью кода, который у вас есть, представление не отвечает после завершения http.get.

Вы можете сделать это, настроив rows как вычисляемое свойство, так как это отслеживает его зависимости (например, row_data) на предмет изменений.

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()
}
person Richard Matsen    schedule 31.03.2018
comment
Метод next () не запускается, поэтому я не получаю данные - person Rocky; 31.03.2018
comment
Хорошо, вы знаете о хуках жизненного цикла? Вы можете вызвать next() в ловушке created (). - person Richard Matsen; 31.03.2018