如何在使用 Vue v-for 时从对象获取 ID

Question

我有一个 select，其中包含使用 Vue.js v-for 循环创建的选项。这工作正常，但我遇到的问题是获取选项的 ID 并将其分配给我的 v-model

我的数据里有什么属性

mplans: [
    {
        name: 'silver',
        id: 'silver-m-2019-07-16'
    },
    {
        name: 'gold',
        id: 'gold-m-2019-07-16'
    },
],

我的select

<select class="form-control" v-model="plan">
    <option disabled hidden>Select A Plan</option>
    <option v-for="plan in mplans">{{ plan.name }} - Monthly</option>   
</select>

Answer 1

您可以执行此操作以从所选选项中获取 ID

<select class="form-control" v-model="plan">
    <option disabled hidden value="">Select A Plan</option>
    <option v-for="p in mplans" :value="p.id" :key="p.id">
       {{ p.name }} - Monthly
    </option>   
</select>

注意：我把v-for "plan"改成了"p"，可能会产生歧义

如何在使用 Vue v-for 时从对象获取 ID

How to get ID from object when using Vue v-for

vue.js

v-for