Buefy select组件v-model绑定值为选项值而非键的问题如何解决？

• 核心原因是你给<option>的value属性绑定的就是选项的显示值（User/Admin），因此v-model绑定的invitationRole自然会存储该值，而非你需要的键名。
• 其次你的遍历逻辑和当前roles的数组结构不匹配：你当前roles是[{'user': 'User'}, {'admin': 'Admin'}]这类包含单键对象的数组，直接用(value, key) in roles遍历数组时，key拿到的是数组索引（0/1），value拿到的是每个单键对象，你当前的写法并没有正确提取对象的键名（user/admin）用于绑定。

方案1：保留现有roles数组结构 #

调整option的遍历逻辑，显式提取每个单键对象的键作为value绑定值：

<b-select v-if="roles" v-model="invitationRole" :placeholder="$t('company.users.invitation.roles-placeholder')">
    <option v-for="(roleObj, index) in roles"
        :key="index"
        :value="Object.keys(roleObj)[0]"
    >
        {{ Object.values(roleObj)[0] }}
    </option>
</b-select>

方案2：优化数据结构（更推荐） #

把roles调整为更易遍历的普通对象结构：{user: 'User', admin: 'Admin'}，无需嵌套数组，调整后代码如下：

<b-select v-if="roles" v-model="invitationRole" :placeholder="$t('company.users.invitation.roles-placeholder')">
    <option v-for="(label, roleKey) in roles"
        :key="roleKey"
        :value="roleKey"
    >
        {{ label }}
    </option>
</b-select>

也可以调整为数组套标准对象的结构[{key: 'user', label: 'User'}, {key: 'admin', label: 'Admin'}]，遍历逻辑更直观：

<b-select v-if="roles" v-model="invitationRole" :placeholder="$t('company.users.invitation.roles-placeholder')">
    <option v-for="role in roles"
        :key="role.key"
        :value="role.key"
    >
        {{ role.label }}
    </option>
</b-select>

内容的提问来源于stack exchange，提问作者Čamo