时间戳

首页 > 解决方案 > Vuetify：如何在数组数组中进行 v-select 搜索

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

问题描述

我正在尝试v-select使用options来自我的 API 的数据，我将数据保存在数组数组中。 我从 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？

标签： arraysvue.jsvuetify.js

解决方案

如果要包括搜索，请使用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>

推荐阅读