我有一个选择下拉列表,可以从 API 获取数据,稍后添加表中所选项目的值。一切正常,但是当我单击addItem()时,我添加了选择项的 id 值,但我想显示 name_value而不是表上的id 。同时,我需要获取选择项的id值。
选择代码(VUEJS):
<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>
按钮添加项目:
<v-btn
color="blue darken-1"
@click="addItem()"
>
Aregar Equipo
</v-btn>
桌子:
<tbody>
<tr
v-for="item in rowData"
:key="item.id_torneo"
>
<td>{{ item.id_torneo }}</td>
<td>{{ item.id_equipo }}</td>
</tr>
</tbody>
function addItem:
addItem () {
var equipos_torneo = {
id_torneo: this.id_torneo,
id_equipo: this.id_equipo,
}
this.rowData.push(equipos_torneo)
},
尝试用这种方法代替:
<template>
<div>
<!-- Your select code -->
<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>
<!-- Your button code -->
<v-btn
color="blue darken-1"
@click="addItem()"
>
Aregar Equipo
</v-btn>
<!-- Your table code -->
<tbody>
<tr
v-for="item in rowData"
:key="item.id_torneo"
>
<td>{{ item.id_torneo }}</td>
<td>{{ item.id_equipo }}</td>
</tr>
</tbody>
</div>
</template>
<script>
export default {
methods: {
addItem () {
// Search the object in the equipos array with the selected id from the select
let equipos_torneo = this.equipos.find(v.id_equipo === this.id_equipo);
// If object gets found successfully, push to the rowData array
if(equipos_torneo) this.rowData.push(equipos_torneo);
},
},
}
</script>
selectElement.options[selectElement.selectedIndex]将返回当前选择的选项。然后,您可以通过提取其标签.textContent或使用.value选择适当的设置方法 提取其值selectElement。也许document.getElementById('select1')足以满足您的需求。;)