Create a dynamic v-data-table in vuetify - vuetify.js

Question

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,
},
];

Answer 1

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
}
}