首页 > 解决方案 > 预选选择选项vue js

问题描述

我为 vue js shentao/multiselect使用流行的多选

<multiselect v-model="test.selectedTags" :options="options" :multiple="true" :clear-on-select="false" 
:hide-selected="true" :preserve-search="true" placeholder="Pick some" label="name" track-by="name">
</multiselect>

当我像这样手动预选选项时

test:{
    url: "",
    selectedTags:[{id:3, name:'asdaa'}]
},
options: []

我得到了正确的结果,当我单击“X”时,我可以删除选择上的选项 在此处输入图像描述

我的选项响应如下所示

options:Array[2]
    0:Object
        id:4
        name:"atetest"
    1:Object
        id:3
        name:"asdaa"

但是,当我从后端获取并将其放在test.selectedTags响应中时,它将看起来像这种相同的格式(对象数组)

//THIS IS THE OPTIONS THAT WILL BE AVAILABLE ON SELECT
selectedTags:Array[2]
    0:Object
        id:3
        name:"asdaa"
    1:Object
        id:4
        name:"atetest"

在此处输入图像描述

但是当我单击“X”时,我无法删除该选项并且没有显示错误?有人可以帮助 TIA

编辑

但是当我从响应中评论变量时,我现在可以在单击“X”时删除该选项但是我无法获得我需要的其他数据

editUrl: function(id){
    let vm = this;
    axios.get('api/urls/' + id)
    .then( response => {
         vm.edit = true;
         //vm.test = response.data.data;
         vm.test.selectedTags = response.data.data.users.map(user => ({ id:user.id, name:user.name }))
         vm.monitorModal = true;
     })
     .catch( error => {
         console.log(error);
      });
},

标签: javascriptvue.jsvuejs2vue-component

解决方案


推荐阅读