axios response data to pre-select on multiselect

廉价感情. 提交于 2019-12-31 05:27:53

问题


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

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: []
            }
        },
    }

来源:https://stackoverflow.com/questions/52243026/axios-response-data-to-pre-select-on-multiselect

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!