如何访问v-for上的数据?VueJS +类星体框架

Question

我有以下代码，这是一个q标记表，用于从搜索查询中获取产品。当表中充满了查询的产品时，我添加了一个按钮来选择一行，所选的行将发送行数据到一个数组，并将该数组发送到另一个名为"selected products"的表，但是我如何访问v-for数据(即:product .nombre)将其发送到新数组?

<q-markup-table flat bordered separator="cell">
<thead class="bg-blue-grey-1">
<tr>
<th class="text-left">Nombre</th>
<th class="text-right">Descripcion</th>
<th class="text-right">Precio</th>
<th></th>
</tr>
</thead>
<tbody v-for="producto in productos" :key="producto.producto_id">
<tr>
<td class="text-left">{{ producto.nombre }}</td>
<td class="text-right">{{ producto.descripcion }}</td>
<td class="text-right">{{ "$" + producto.precio }}</td>
<td class="text-right">
<q-btn
flat
class="text-primary"
label="Seleccionar"
@click="agregarProducto"
></q-btn>
</td>
</tr>
</tbody>
</q-markup-table>

Answer 1

将产品传递给agregarProducto，像这样…

@click="agregarProducto(producto)"

将完整的对象添加到选择中…

methods: {
agregarProducto(producto) {
this.selectedProducts.push(producto);
// see?
console.log('first price is', this.selectedProducts[0].precio);
}