我如何访问 v-for 上的数据？ VueJS + Quasar 框架

Question

我有以下代码，它是一个 q-markup-table 从搜索查询中获取产品。 当表中填满了来自查询的产品时，我添加了一个按钮来选择一行，选定的行会将行数据发送到一个数组并将该数组发送到另一个名为“选定产品”的表，但是我怎样才能访问v-for 数据（即：producto.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);
  }