arrays - Vuetify : How to do a v-select search in array of arrays

Question

我正在尝试使用来自我的 API 的 v-select 执行 options，我将数据放在数组数组中。
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 中工作？

Answer 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>