javascript - axios 响应数据在多选时预选

Question

我使用流行的多选插件shentao/vue-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" :preselect-first="true">
</multiselect>  

在我的代码上，我使用 axios 请求来获取用户 ID 和名称以由多选预选

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

响应看起来像这样

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

现在，我成功得到了结果并在多选中预选了数据

但是，当我单击“x”删除时，它不会删除选定的数据并且没有显示错误。如何解决这个问题？TIA

这就是我的选项对象的样子

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

测试对象

test:Object
    created_at:"2018-09-07 15:58:51"
    description:"server5"
    id:9
    latest_url_status:Object
    list_status:1
    selectedTags:Array[2]
        0:Object
           id:3
           name:"asdaa"
        1:Object
            id:4
            name:"atetest"
    updated_at:"2018-09-07 16:48:34"
    url:"https://httpstat.us/200"
    users:Array[2]

返回数据

export default {    
        data(){
            return {
                test:{
                    url: "",
                    selectedTags:[]
                },
                urls:{},
                users:{},
                contacts: [],
                monitorModal:false,
                result: '',
                pagination: {},
                loading: true,
                edit:false,
                urlChecked: {},
                logsModal: false,
                logsData:{},

                //mulltiselect
                options: []
            }
        },
    }

标签： javascriptvue.jsvuejs2vue-componentmulti-select