根据所选类别输入隐藏时不显示日期选择器答案

【问题标题】：Datepicker not displays when input hide according to selected category根据所选类别输入隐藏时不显示日期选择器
【发布时间】：2020-05-29 01:05:45
【问题描述】：

我目前正在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="">

但是当我点击上面的输入字段时，日期选择器没有出现。我在页面加载时使用以下代码：

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 后，只会出现这个输入字段。

有人可以指出这里的错误是什么吗？您的帮助将不胜感激。谢谢！

【问题讨论】：

标签： jquery html vue.js datepicker

【解决方案1】：

如果它被v-if“隐藏”了，它不在DOM中，所以jQuery无法通过jQuery(".boost-date")找到它

您可以尝试使用v-show 来解决它，它通过 CSS 隐藏但元素不会从 DOM 中添加或删除。

【讨论】：