如何使用来自 axios.get 的 json 数据填充 v-select 组件答案

【问题标题】：How to populate a v-select component with json data coming from axios.get如何使用来自 axios.get 的 json 数据填充 v-select 组件
【发布时间】：2019-10-21 12:30:29
【问题描述】：

我很难尝试使用来自后端的数据填充 v-select 组件。后端数据为json格式。

数组“items_category”未存储数据。所以我在我的 v-select 中看到“没有可用的数据”。谁能帮我。谢谢。这是我的代码：

<v-select v-model="category" :items="items_category" chips dense></v-select>

data () {
  return {
    category: '',
    items_category: [],
    categories: [],
    i: 0
  }
},

created () {
  this.initialize()
},

methods: {
    initialize () {
        axios.get('http://localhost:4000/categories', {
            })
                .then(response => { 
                    this.categories = response.data

                    for (this.i=0; this.i<this.categories.length; this.i++) {
                        this.items_category[this.i] = this.categories[this.i].category_name
                    }
                })
                .catch(function (error) {
                    console.log(error);
            }) 
    }
}

这是我的 json (http://localhost:4000/categories)：

[
  {
    "id": 1,
    "category_name": "Name 1",
    "category_description": "Description 1"
  },   
  {
    "id": 2,
    "category_name": "Premium",
    "category_description": "Description 2"
  },
  {
    "id": 3,
    "category_name": "Free",
    "category_description": "Description 3"
  }
]

【问题讨论】：

标签： vue.js vuejs2 axios

【解决方案1】：

好的，我用 push 方法弄对了

this.items_category.push(this.categories[this.i].category_name)

【讨论】：

如果您仅将它用于for 循环，i 也不必在 data 内部。