网页及报错截图:
错误代码:
<el-select v-model="value"
@change="selectChanged(value)"
placeholder="请选择就诊人"
>
<el-option
v-for="item in options"
:key="item.a"
:label="item.a.label"
:value="item.a"
>
</el-option>
</el-select>
<script>
export default {
data() {
return {
options: [
{
a: {
value: "选项1",
label: "user1" },
},
{
a: {
value: "选项2",
label: "user2" },
},
{
a: {
value: "选项3",
label: "添加新就诊人",
},
},
],
value: "",
};
},
methods: {
selectChanged(value) {
alert(value.value + value.label);
console.log(value);
},
},
};
</script>
报红的原因是 :key="item.a"
,这里的item.a
是一个对象。
[Vue warn]: Avoid using non-primitive value as key, use string/number value instead.的意思是:
避免使用非基元值作为键,而应改用字符串/数字值。
将item.a
改为item.a.value
即可解决。