vue.js - vue multiselect 在更新 v-model 时失去反应

Question

我的 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 &amp;&amp; !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'  
    }
]

当我尝试将此响应绑定到 multiselectv-model时，即role.roleID：

this.role.roleID = responce

多选组件失去反应性。

让我知道我在这里做错了什么。谢谢。

Answer 1

如果不直接分配角色，请尝试使用Vue setter.

this.$set(this.role, 'roleID', responce);

Answer 2

你有一些错误：

1. 您部分中的role变量data被初始化为对象 - 但它应该是一个数组，否则您不能选择多个选项
2. 是v-model必然的roleID- 但你的回应没有这样的属性

<multiselect v-model="role" />

data: () => ({
  roles: [], // the list of all options
  role: [], // the list of currently selected options
})

this.roles = response