我有一个选择下拉列表，可以从 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')足以满足您的需求。;)