Vuejs 选项。从所选项目中获取 ID

Question

我其实在用VueJS，遇到了一个小问题

我有一个选择器，它需要记住一个 ID 以便稍后在 axios 请求中发送。在 "selected" var 中，出于用户友好的原因，我们只需要保留 "type" 的名称。所以，我需要在不显示的情况下获取用户选择的 ID。实际上，代码看起来像这样。

<select v-model="selected">
 <label for="lg_type" class="sr-only">Type de personnage</label>
  <option disabled value="">Choisir un type</option>
  <option v-for="onetype in playertype" class="form-control" id="lg_type" name="lg_type" v-bind:key="onetype.idType">
      {{onetype.idType}}-{{ onetype.name }}
  </option>
</select>

Selected 是所选类型的实际名称。由于它是 vue，当我从我的选择器中单击另一个类型时，它会自动更改

onetype 包含两件事：名称和 idType playertype 包含所有类型的数组

正如我们在代码中看到的那样，我显示了类似 "idType - name" 的内容，但我只想显示 "name"（所以只需擦除 onetype.idType），但我需要获取 id 以将其发送到其他地方（我不能使用 onetype.idType 将 id 获取到我的 axios 方法）

不知道说的够不够清楚，我需要把onetype.idType传给一个axios方法，但是我不能这样用

提前谢谢你，这让我发疯，我觉得我错过了一些明显的东西><

Answer 1

使用 value 属性，您将在 v-model 中获得它而不是显示选项：

<select v-model="selected">
  <label for="lg_type" class="sr-only">Type de personnage</label>
  <option disabled value="">Choisir un type</option>
  <option 
    v-for="onetype in playertype" 
    :value="onetype.idType"
    class="form-control"
    id="lg_type"
    name="lg_type"
    v-bind:key="onetype.idType"
  >{{ onetype.idType }}-{{ onetype.name }}</option>
</select>

Vuejs 选项。从所选项目中获取 ID

Vuejs Option. Get an ID from a selected item

javascript

selector

vue.js