如何解决vue多选择在更新v模型时失去反应性
我的Vue多选组件:
<multiselect
required
label="role"
track-by="role"
:close-on-select="false"
:clear-on-select="false"
:preserve-search="true"
:preselect-first="false"
:multiple="true"
:options="roles"
v-model="role.roleID"
>
<template slot="selection" slot-scope="{ values,isOpen }">
<span
class="multiselect__single"
v-if="values.role && !isOpen"
>
{{ values.role }}
</span>
</template>
</multiselect>
和数据方法:
data: function () {
return {
role: {
role: '',description: '',scopeLevel: '',roleID: ''
},roles: [],}
},
当我进行API调用时,得到以下响应:
let responce = [
{
'id': '1','role': 'Test role'
},{
'id': '2','role': 'Test role 2'
}
]
当我尝试将此响应绑定到多选v-model
时,即role.roleID
:
this.role.roleID = responce
多选组件失去反应性。
让我知道我在这里做错了什么。谢谢。
解决方法
您有一些错误:
- 您的
role
部分中的data
变量被初始化为对象-但它应该是一个数组,否则您不能选择多个选项 -
v-model
已绑定到roleID
-但您的回复没有这样的属性
<multiselect v-model="role" />
data: () => ({
roles: [],// the list of all options
role: [],// the list of currently selected options
})
this.roles = response
,
没有直接分配角色,请尝试使用Vue setter
。
this.$set(this.role,'roleID',responce);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。