Search code examples
vue.jsvuetify.jsv-autocomplete

How to save item-value in v-automplete in other variable? [Vue.js + Vuetify]


I don't know how to save the item-value in a variable in the component <v-autocomplete> of Vue.js. I want to save it in idLibro.

<template>
    <v-container grid-list-md>
      <v-layout row wrap>
        <v-autocomplete
        :disabled="!isEditing"
        :items="showTitleBooks"
        :filter="customFilter"
        color="white"
        item-text="name"
        item-value="id"
        label="Book"
        >
        </v-autocomplete>
    </v-layout>
  </v-container>
</template>

<script>
export default {
  data() {
    return {
      books: [],
      showTitleBooks: [],
      idLibro: "",
    };
  },
  methods: {
    getBooks() {
      this.$axios
        .get("http://localhost:8080/libros")
        .then(data => {
          this.books = data.data;
          for (const i of this.books) {
            this.showTitleBooks.push({ name: i.titulo, id: i.id_libro });
          }
          console.log(this.books);
        })
        .catch(() => {
          console.log("No hay libros");
        });
    },
};
</script>

Solution

  • <v-autocomplete
      v-model="idLibro"
    >
    </v-autocomplete>