axios response data to pre-select on multiselect

2020-05-03 02:25发布

Im using the popular plugin for multiselect 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>  

On my code im using axios request to fetch user id and name to be pre-selected by the multi-select

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);
     });
     },
 }

and the response looks like this

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

Now, I successfully got the result and pre-select the data in multi-select enter image description here

However when i click the "x" to remove, it doesnt remove the selected data and no errors has been shown. How to fix this? TIA

This is what my options object looks like

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

Test object

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]

return data

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

                //mulltiselect
                options: []
            }
        },
    }

0条回答
登录 后发表回答