данные ответа Axios для предварительного выбора на множественном выборе - PullRequest
Новая
       26

данные ответа Axios для предварительного выбора на множественном выборе

0 голосов
/ 09 сентября 2018

Я использую популярный плагин для множественного выбора 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 для получения идентификатора пользователя и имени, которые должны быть предварительно выбраны мультивыбором 

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"

Теперь я успешно получил результат и предварительно выбрал данные в множественном выборе. enter image description here

Однако, когда я нажимаю «x», чтобы удалить, он не удаляет выбранные данные, и ошибки не отображаются. Как это исправить? ТИА

Вот так выглядит мой объект параметров 

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