vuejs2vuetify.jsv-data-table

How to set a value in an autocomplete select vuetify


I have this v-data-table, witch one shows the result from a request to api, also it allows me to edit them, in the text-field it sets the information correctely, but the problem is it doesn't set the information in the autocomplete select:

<v-data-table
    :headers="cabeceras"
    :items="tablaRepuestos"
    sort-by="Repuesto"
    class="elevation-1"
    no-results-text="No se encontraron resultados"
    no-data-text="No ha cargado Ningun Dato"
>
  <template v-slot:[`item.itg_descripcion`]="props">
    <v-autocomplete
        v-model="props.item.itg_descripcion"
        :items="fillModRepuestos.listaRepuestos"
        item-value="itg_id"
        item-text="itg_descripcion"
        label="Repuestos"
        height="20"
        return-object
        @change="cambioRepuesto(props.item.itg_descripcion)"
        no-data-text="No hay coincidencias"
        clearable
    ></v-autocomplete>
  </template>

  <template v-slot:[`item.cantidad`]="props">
    <v-text-field
        v-model="props.item.cantidad"
        label="Cantidad"
        clearable
        type="number"
    ></v-text-field>
  </template>

  <template v-slot:[`item.actions`]="{ item }">
    <v-tooltip bottom mg="1">
      <template v-slot:activator="{ on, attrs }">
        <v-btn
            v-bind="attrs"
            v-on="on"
            color="red"
            small
            fab
            dark
            @click="eliminarRepuesto(item)"
            class="ml-2"
        >
          <v-icon>mdi-delete</v-icon>
        </v-btn>
      </template>
      <span>Eliminar Repuesto</span>
    </v-tooltip>
  </template>
</v-data-table>

this shows the v-data-table right now:

enter image description here

but it should shows this:

enter image description here

the autocomplete select load the list correctly but the problem, as I said, is they don't load the information from the field itg_descripcion, how can I resolve this problem?


Solution

  • You have configured your v-autocomplete to use itg_id as it's item-value, this means you need to pass the itg_id to it's v-model in order to work properly. But in your code you are passing props.item.itg_descripcion.

    If you have the itg_id in your props.item object, you just need to use that instead.

    <v-autocomplete
        v-model="props.item.itg_id"
        :items="fillModRepuestos.listaRepuestos"
        item-value="itg_id"
        item-text="itg_descripcion"
        label="Repuestos"
        height="20"
        return-object
        @change="cambioRepuesto(props.item.itg_descripcion)"
        no-data-text="No hay coincidencias"
        clearable
    ></v-autocomplete>
    

    If not, you can configure it to work with itg_descripcion only. But imo using id's it's safer.

    <v-autocomplete
        v-model="props.item.itg_descripcion"
        :items="fillModRepuestos.listaRepuestos"
        item-value="itg_descripcion"
        item-text="itg_descripcion"
        label="Repuestos"
        height="20"
        return-object
        @change="cambioRepuesto(props.item.itg_descripcion)"
        no-data-text="No hay coincidencias"
        clearable
    ></v-autocomplete>