Select2 в Vue условного рендеринга с помощью наблюдателя - PullRequest
Новая
       8

Select2 в Vue условного рендеринга с помощью наблюдателя

0 голосов
/ 03 декабря 2018

У меня есть выпадающий список (и другие входы), которые нужно отображать, только если флажок установлен пользователем.Чтобы сохранить интерфейс чистым, он скрывается за v-if: 

<input type="checkbox" id="override" name="override" v-model="override"/>
<div v-if="override">
    <input type="number" name="overridePrice" v-model="overridePrice"/>
    <select class="overrideReason" name="overrideReason" id="overrideReason">
        <option v-for"res in override_reason" :value="res.id">{{ res.text }}</option>
    </select>
</div>

У меня изначально был этот набор на наблюдателе для overridePrice, равным> 0, который работал: 

watch: {
    overridePrice: function(val){
        if(val>0){
            $('.overrideReason').select2();
        }
    }
},

Однакораскрывающийся список причин необходим, независимо от того, равно ли это значение 0 или больше, поэтому я решил, что изменить это значение для просмотра на логическом значении будет так же просто, но он не работает, select2 не инициализируется должным образом, и у меня остается стандартHTML-раскрывающийся список: 

watch: {
    override: function(val){
        if (val){
            console.log("This will print");
            $('.overrideReason').select2()'
        }
    }
},

Журнал консоли работает должным образом, однако инициализация - нет.Это ошибка или я что-то упустил в наблюдателях Vue / JQuery / Select2?

1 Ответ

0 голосов
/ 03 декабря 2018

Это может быть .overrideReason недоступно во время работы функции часового контроля.Вы можете использовать $nextTick

watch: {
    override: function(val){
        if (val){
            this.$nextTick(() => {
              console.log("This will print");
              $('.overrideReason').select2()'
            })
        }
    }
},
...