接收数组，然后使用 v-for 显示多个<select></select>结果 单击一个选项会更改所有其他选项值

Question

<select  v-for="roles in arrayRoles">
<option value="">Select role</option>
<option :value="role.id" v-for="role in roles" :key="index">
{{ role.title }}</option>
</select>

当只选择一个选项时，如何停止值的同时变化

Answer 1

看起来您在外部v-for上丢失了:key，甚至在内部v-for中您也丢失了index的声明。

我对arrayRoles的内容做了一些假设，发现下面的模板可以工作:

<select v-for="(roles, index) in arrayRoles" :key="index">
<option value="">Select role</option>
<option v-for="(role, i) in roles" :key="i" :value="role.id">
{{ role.title }}
</option>
</select>

我用于测试的arrayRoles示例:

[
[
{ id: 1, title: 'one' },
{ id: 2, title: 'two' },
{ id: 3, title: 'three' }
],
[
{ id: 4, title: 'four' },
{ id: 5, title: 'five' },
{ id: 6, title: 'six' }
],
[
{ id: 1, title: 'one' },
{ id: 2, title: 'two' },
{ id: 3, title: 'three' }
]
]