Whenever I choose an item from a select dropdown that fetches data from an API, I then add the selected item's value to a table. Everything functions correctly except for when I click on addItem(), which adds the ID value of the selected item to the table. What I actually want to display on the table is the name_value instead of the ID. Additionally, I still need to retrieve the ID value of the selected item.
Below is the VUEJS code for the select:
<select
id="select1"
ref="seleccionado"
v-model="id_equipo"
required
>
<option
v-for="equipo in equipos"
:key="equipo.id_equipo"
:value="equipo.id_equipo"
>
{{ equipo.nombre_equipo }}
</option>
</select>
Button for adding items:
<v-btn
color="blue darken-1"
@click="addItem()"
>
Agregar Equipo
</v-btn>
Table Display:
<tbody>
<tr
v-for="item in rowData"
:key="item.id_torneo"
>
<td>{{ item.id_torneo }}</td>
<td>{{ item.id_equipo }}</td>
</tr>
</tbody>
The function addItem:
addItem () {
var equipos_torneo = {
id_torneo: this.id_torneo,
id_equipo: this.id_equipo,
}
this.rowData.push(equipos_torneo)
},