Datepicker не отображается при скрытии ввода в соответствии с выбранной категорией

Question

Я сейчас работаю над проектом в Laravel & VueJs. У меня есть следующий выпадающий список.

<select class="form-control" v-model="form.type" @change="typeChange()">
    <option value="1">Repair</option>
    <option value="2">PM</option>
    <option value="3">Upgrade/NFC</option>
</select>

В соответствии с выбранным параметром некоторые поля выглядят так, как будто я выбираю PM появляется следующее поле ввода

<input name="latest_pm_date" v-model="form.latest_pm_date" class="form-control boost-date" id="latest_pm_date" required="" placeholder="">

Но DatePicker не появляется, когда я нажимаю на поле ввода выше. При загрузке страницы я использую следующий код:

mounted(){
    jQuery(".boost-date").datetimepicker({
        format: 'YYYY-MM-DD ',
    }).on('dp.change',  function(e) {
        let event = new Event('input');
        this.dispatchEvent(event);
    });
}

Однако я также использовал вышеуказанный указатель даты также в функции typeChange().

typeChange(){
    this.form.reminder_id = "";

    jQuery(".boost-date").datetimepicker({
        format: 'YYYY-MM-DD ',
    }).on('dp.change',  function(e) {
        let event = new Event('input');
        this.dispatchEvent(event);
    });
}

Тем не менее средство выбора даты не отображается. Я думаю, что причина этого в том, что это поле ввода скрыто при загрузке страницы. И после того, как я выберу PM из выпадающего списка, появится только это поле ввода.

Может кто-нибудь указать мне, в чем здесь ошибка? Ваша помощь будет очень ценится. Спасибо!

Answer 1

Если оно «скрыто» v-if, его нет в DOM, поэтому jQuery не может найти его через jQuery(".boost-date")

. Вы можете попытаться решить его с помощью v-show который скрылся через CSS, но элементы не добавляются и не удаляются из DOM.