Vuetify：如何在数组数组中进行 v-select 搜索答案

【问题标题】：Vuetify: How to do a v-select search in array of arraysVuetify：如何在数组数组中进行 v-select 搜索
【发布时间】：2021-05-22 20:58:42
【问题描述】：

我正在尝试使用来自我的 API 的 options 执行 v-select，我将数据保存在数组数组中。 Array which I got from API

它应该是带有搜索的select，因为它的数据太多。这是我的代码：

<v-select 
  :items="categoriasProduto"
  v-model="dadosProduto.id_marca"
  item-text="nome"
  item-value="id"
  label="Marca"
></v-select>

脚本：

mounted() {
  const url = process.env.VUE_APP_API_URL;
  axios
    .get(`${url}marcas/`)
    .then((response) => {
      this.marcas = response.data;
      console.log(this.marcas);
    });
},

有没有办法让它在Vue中工作？

【问题讨论】：

请提供阅读How to ask 和Minimal, reproducible example。没有足够的信息，就几乎没有机会有意义地回答您的问题。顺便说一句 - 是的。如果在 JavaScript 中可以，那么在 Vue 中也可以。

标签： arrays vue.js vuetify.js

【解决方案1】：

如果您想包含搜索，请使用v-autocomplete。要遍历列表，请使用 .flat:

new Vue({
  el:"#app",
  vuetify: new Vuetify(),
  data: () => ({
    categoriasProduto: [
      [
        { id:1, id_simplus:'1', nome:'nome 1' },
        { id:2, id_simplus:'2', nome:'nome 2' },
      ],
      [
        { id:3, id_simplus:'3', nome:'nome 3' },
        { id:4, id_simplus:'4', nome:'nome 4' },
      ]
    ],
    dadosProduto: { id_marca: null }
  }),
});

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script><link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">

<v-app id="app">
  {{dadosProduto.id_marca}}
  <v-autocomplete
    :items="categoriasProduto.flat()"
    v-model="dadosProduto.id_marca"
    item-text="nome"
    item-value="id"
    label="Marca"
  ></v-autocomplete>
</v-app>

【讨论】：

喜欢 .flat()