0

伙计们，我是 Vue 的新手，所以不知道如何解决这个问题让我先显示代码然后问题，我使用 Vue-Good-table 这里是链接https://xaksis.github.io/vue-good-演示/#/简单表

<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响应值附加到好表的行中

4

2 回答 2

2

要“附加 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))
  }

请注意，您还必须导入 axios。所以当脚本标签开始使用时：

import axios from 'axios'

Axios 是一个很棒的软件包，您可以在此处了解更多信息

正如我在您的代码中看到的，您没有使用 axios 但 vue-resource.Vue-resource 也是很好的软件包，因此您可以在此处了解更多信息

于 2018-03-31T12:30:36.690 回答
2

我猜你有代码，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()
}
于 2018-03-31T10:27:12.140 回答