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

user_15198218 0
Viewed 187

I'm trying to do a v-select with the options coming from my API, I have the data in an array of arrays. Array which I got from API

It is supposed to be a select with a search because it's too many data. Here is my code:

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

Script:

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

It's there a way to make it work in Vue?

vuetify.js vue.js arrays
1 Answers

If you want to include searching use v-autocomplete. To iterate over the lists, use .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>

user_74863130
Related