vue js 选择（vuetify）+ axios 人口答案

【问题标题】：vue js select (vuetify) + axios populationvue js 选择（vuetify）+ axios 人口
【发布时间】：2020-09-19 15:11:10
【问题描述】：

我有一个 vue js (vuetify) + laravel + axios 的堆栈。我正在尝试使用 axios 填充下拉选择。我在 laravel 上设置了一个 API 路由，所以我可以从数据库表“类别”中提取数据。该api返回以下内容：

[
{
    "id": 1,
    "category_name": "Electronics",
    "category_synonym": "Computer Accessories",
    "created_at": "2020-05-31T20:11:56.000000Z",
    "updated_at": "2020-05-31T20:11:56.000000Z"
},
{
    "id": 2,
    "category_name": "Hardware",
    "category_synonym": "hardware",
    "created_at": "2020-05-31T20:17:13.000000Z",
    "updated_at": "2020-05-31T20:17:13.000000Z"
},
{
    "id": 3,
    "category_name": "Kitchenware",
    "category_synonym": null,
    "created_at": "2020-05-31T20:49:32.000000Z",
    "updated_at": "2020-05-31T20:49:32.000000Z"
},
{
    "id": 4,
    "category_name": "Textile",
    "category_synonym": null,
    "created_at": "2020-05-31T21:29:30.000000Z",
    "updated_at": "2020-05-31T21:29:30.000000Z"
}

]

我想将 category_name 放入一个包含在一个 foram 中的 vue js 下拉列表中。怎么做才简单？

【问题讨论】：

标签： javascript vue.js axios

【解决方案1】：

你可以试试这样的：

<v-select v-model="currentCategory" :items="resultFromAPI" item-text="category_name" item-value="id" />

要使用 Axios 获取数据，您可以尝试以下操作：

import axios from 'axios';

const ajax = axios.create({
  baseURL: 'https://example.com/api',
  headers: {
    'Content-Type': 'application/json'
  }
});

export default
{
  data()
  {
    return {
      categories: [],
      currentCategory: null,
    }
  },
  mounted()
  {
    this.fetchData();
  },
  methods:
  {
    fetchData()
    {
      ajax.get('/categories').then(response =>
      {
        this.currentCategory = null;
        this.categories = response || [];
      });
    }
  }
}

【讨论】：

【解决方案2】：

Vuetify 选择有 item-text 和 item-value。你可以使用这些道具：

<v-select
  label="Category"
  :items="categories"
  item-text="category_name"
  item-value="id"
/>

【讨论】：

查看sandbox
好的，如果列表中没有元素，我如何计算可能隐藏字段的项目数？
如何取回被选中字段的值？