Search code examples
vuetify.jsvuetify-datatable

Create a dynamic v-data-table in vuetify

I have this v-data-table in which one I load the list of products. Each time I press the "Agregar Productos" button, it adds a row to the table, each row must to have a autocomplete select where it stores the available products in the "Nombre" column, a text-field where I can to input the quantity of the product in the "Cantidad" column, the price product in the "Precio" columns in the respective row when the product is changed in the autocomplete select (the price can be got from productosDisponibles), for the last in the "Total" column it must to show the result of the columns "Precio" x "Cantidad".

What can I to do obtain the data of the selected product and show it in the respective row?

<v-data-table
    :headers="headers"
    :items="listaProductos"
    sort-by="calories"
    class="elevation-1"
  >
    <template v-slot:top>
      <v-toolbar flat>
        <v-toolbar-title>Productos</v-toolbar-title>
        <v-divider class="mx-4" inset vertical></v-divider>
        <v-spacer></v-spacer>
        <v-btn
          color="primary"
          dark
          class="mb-2"
          @click="agregarProductoALaLista"
        >
          Agregar Producto
        </v-btn>
      </v-toolbar>
    </template>
    <template v-slot:[`item.name`]="props">
      <v-autocomplete
        v-model="props.item.name"
        :items="productosDisponibles"
        item-value="id"
        item-text="name"
        outlined
        dense
        label="Producto"
        return-object
        @change="getCantidad(props.item.name)"
      ></v-autocomplete>
    </template>
    <template v-slot:[`item.cantidad`]="props">
      <v-text-field
        v-model="props.item.cantidad"
        label="Cantidad"
        type="number"
        placeholder="Cantidad"
      ></v-text-field>
    </template>
    <template v-slot:[`item.precio`]="props">
      {{ props.item.precio }}
    </template>
    <template v-slot:[`item.total`]="props">
      {{ props.item.cantidad * props.item.precio }}
    </template>
    <template v-slot:[`item.actions`]="{ item }">
      <v-icon small class="mr-2" @click="editItem(item)"> mdi-pencil </v-icon>
      <v-icon small @click="deleteItem(item)"> mdi-delete </v-icon>
    </template>
    <template v-slot:no-data>
      <v-btn color="primary" @click="initialize"> Reset </v-btn>
    </template>
  </v-data-table>

this is the structure of productosDisponibles:

this.productosDisponibles = [
        {
          id: 1,
          name: "Coca-Cola",
          cantidad: 159,
          fat: 6.0,
          precio: 24,
          protein: 4.0,
        },
        {
          id: 2,
          name: "Leche",
          cantidad: 237,
          fat: 9.0,
          precio: 37,
          protein: 4.3,
        },
        {
          id: 3,
          name: "Alfajor",
          cantidad: 262,
          fat: 16.0,
          precio: 23,
          protein: 6.0,
        },
];

enter image description here

Solution

  • I wasn't able to test it but I believe you can update the getCantidad() method to update the listaProductos variable.

    getCantidad(name) {
  ...
  const index = this.listaProductos.findIndex((e) => e.name === name); //find the index of the product you want to update
  const productDisponibles = this.listaProductos.find((e) => e.name === name); // find the product price
  if (index !== -1 && productDisponibles) {
    this.listaProductos[index].precio = productDisponibles.precio; // update list if you found the product information and the index
  }
}