Получение динамически отображаемого выпадающего Vue.js для работы с библиотекой Select2 - PullRequest
Новая
       12

Получение динамически отображаемого выпадающего Vue.js для работы с библиотекой Select2

0 голосов
/ 18 ноября 2018

Я новичок в Vue, так что извините, если это простой вопрос.У меня есть страница, на которой я динамически отображаю выпадающий список и динамически заполняю его параметры на основе вычисляемого свойства, называемого FilterWidgets , которое зависит от выбора, сделанного пользователем в других выпадающих списках.Разметка выглядит следующим образом: 

<div v-if="filteredWidgets.length > 0">
 <select id="widgetSelect" name="widgets">
      <option value="">Select up to two Widgets</option>
      <option v-for="widget in filteredWidgets" v-bind:value='widget.id'>
         @{{widget.name}}
      </option>
   </select>
</div>

В документации Select2 говорится, что именно так вы преобразуете элементы select / option в элементы множественного выбора Select2: 

$(document).ready(function() {
    $('#widgetSelect').select2();
});

Я могузаставить это работать для страницы с нединамически отображаемым выпадающим списком выбора.Очевидно, что это не работает с Vue, потому что раскрывающийся список отображается динамически, и он основан на вычисленном свойстве selectedWidgets.Мне нужно найти способ заставить select2 работать во время появления / изменения этого выпадающего списка.Вот вычисляемый метод свойства фильтруемого вида:раскрывающийся список widgetSelect сразу после его визуализации с помощью Vue.Как правильно это сделать?

1 Ответ

0 голосов
/ 18 ноября 2018

watch для изменения filteredWidgets и вызова .select2(). 

watch: {
    async filteredWidgets() {
        await this.$nextTick() // wait for DOM to update
        $(this.$refs.widgetSelect).select2()
    }
}

Вам нужно будет добавить ref к <select>, чтобы вы могли получить доступ к элементу напрямую с помощью this.$refs.widgetSelect, вместо того, чтобы делать что-то вроде this.$el.querySelector('#widgetSelect'). id attr больше не нужен, если только вы не используете его для чего-то другого. 

<select ref="widgetSelect" name="widgets">
...