Блог

Главная - Вопросы по программированию - vue multiselect потерял реактивность при обновлении v-модели

vue multiselect потерял реактивность при обновлении v-модели

#vue.js #vue-reactivity #vue-multiselect

#vue.js #vue-реактивность #vue-multiselect

Вопрос:

Мой компонент Vue multiselect:

 <multiselect 
    required 
    label="role" 
    track-by="role" 
    :close-on-select="false"
    :clear-on-select="false" 
    :preserve-search="true" 
    :preselect-first="false"
    :multiple="true" 
    :options="roles" 
    v-model="role.roleID" 
>
    <template slot="selection" slot-scope="{ values, isOpen }">
        <span
            class="multiselect__single"
            v-if="values.role amp;amp;amp;amp; !isOpen"
        >
            {{ values.role }} 
        </span>
    </template>                
</multiselect>

И метод данных:

 data: function () {
    return {
        role: {
            role: '',
            description: '',
            scopeLevel: '',
            roleID: ''
        },
        roles: [],
    }
},

И когда я делаю вызов API, я получаю следующий ответ:

 let responce = [
    {            
        'id': '1',
        'role': 'Test role'            
    }, {
        'id': '2',
        'role': 'Test role 2'  
    }
]

Когда я пытаюсь привязать этот ответ к multiselect v-model , т.е. role.roleID :

 this.role.roleID = responce

Компонент multiselect теряет реактивность.

Дайте мне знать, что я здесь делаю не так. Спасибо.

Комментарии:

1. Можете ли вы объяснить, что происходит после установки данных из ответа API. разве это не отображается при выборе multiselect или?

2. @ChathurangaK Он отображается как выбранные параметры, но компоненты multiselect теряют свою реактивность. т.е. Когда я выбираю следующий параметр, он не отображается во внешнем интерфейсе.

Ответ №1:

Без прямого назначения роли попробуйте использовать Vue setter .

 this.$set(this.role, 'roleID', responce);

Ответ №2:

У вас есть некоторые ошибки:

  1. role переменная в вашем data разделе инициализируется как Object — но она должна быть массивом, иначе вы не сможете выбрать несколько параметров
  2. это v-model связано с roleID — но ваш ответ не обладает таким свойством
 <multiselect v-model="role" />
  
 data: () => ({
  roles: [], // the list of all options
  role: [], // the list of currently selected options
})
  
 this.roles = response

Комментарии:

1. Спасибо за ответ. Дело в том, что моя ‘v-model’ — это ‘role.RoleId’, а не ‘role’, т. Е. Я привязываю список выбранных в данный момент параметров к ‘role.RoleId’. В приведенном выше вопросе я дал ему строковое объявление, но даже если я изменил его на string, он не работает. Еще одна вещь, которую я заметил, это то, что перед назначением ответа на ‘role.RoleId’, если я его утешаю, он показывает » [{…}, {…}, __ob__: Observer] и когда я назначаю ему массив ответов, а затем утешаю его, он показывает [{…}, {…}] . Я не уверен, что это __ob__: Observer за штука, но в этом разница, которую я нашел.

2. ** рассмотрите «массив» вместо строки в 3-й строке приведенного выше комментария. Так и будет … я дал ему строковое объявление, но даже если я изменил его на «Массив», он не работает

3. Как я уже говорил ранее — role.roleID может сработать, если ваш выбор был ограничен только выбором одного элемента. Но вы явно установили :multiple="true" , и поэтому для вас v-model обязательно привязываться к массиву. Поэтому, если вы настаиваете на привязке к role.roleID — вам следует инициализировать roleID как массив, а не как строку, и назначить ответ API для roles массива — не для role.roleID