How could I access to data on a v-for? VueJS + Quasar Framework

Question

I have the following code, it's a q-markup-table to get products from a search query. When the table gets filled with products from the query I added a button to select one row, the selected row will send the row data to an array and send that array to another table called "selected products", but how can I acces to the v-for data (ie: producto.nombre) to send it to the new array?

  <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

Pass the product to agregarProducto , like this...

@click="agregarProducto(producto)"

Add the complete object to the selection...

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