Vue JS - 引导日期选择器不工作答案

【问题标题】：Vue JS - Bootstrap Datepicker not workingVue JS - 引导日期选择器不工作
【发布时间】：2018-10-02 14:13:37
【问题描述】：

我正在尝试通过动态添加它来在 Vue Js 中使用引导日期选择器，但它没有初始化。

HTML

<div v-for="(aligner,index) in aligners" v-bind:key="aligner">
<input type="hidden" v-bind:name="'AlignerDetails[' + index + '].BatchNo'" v-bind:value="'AlignerDetails_' + (index + 1) + '__BatchNo'" />
<div class='mt-element-ribbon bg-grey-steel'>
    <div class='ribbon ribbon-round ribbon-color-primary uppercase'>Batch #{{index + 1}}</div>
    <div class='pull-right'>
        <a href='javascript:;' v-on:click='remove(index);' class='btn-delete'>
            <i class='fa fa-trash-o font-red'></i>
        </a>
    </div>
    <div class='row ribbon-content'>
        <div class='col-md-12 padding-left-0 padding-right-0' style="margin-bottom:5px;">
            <input type="text" v-bind:name="'AlignerDetails[' + index + '].AlignersSent'" v-on:blur="calculate();" class="form-control alignersSent" placeholder="Aligners Sent" />
        </div>
        <div class='col-md-12 padding-left-0 padding-right-0'>
            <div class="input-group date bs-datetime">
                <input type="date" v-bind:name="'AlignerDetails[' + index + '].AlignersSentDate'" class="form-control form-control-inline alignersSentDate" placeholder="Aligners Sent Date" autocomplete="off" />
                <span class="input-group-addon">
                    <button class="btn btn-default date-set" type="button">
                        <i class="fa fa-calendar"></i>
                    </button>
                </span>
            </div>
        </div>
    </div>
</div>
</div>

var app = new Vue({
el: "#alignerDetails",
data: {
    aligners: []
},
mounted: function () {
    $('.date').datepicker({
        autoclose: true,
        format: 'dd M yyyy'
    });
},
methods: {
    add: function () {
        this.aligners.push({});
    },
    remove: function (index) {
        this.aligners.splice(index, 1);
    }
}
});

我不明白为什么这不起作用..

【问题讨论】：

尝试将初始化代码移动到beforeDestroy而不是mounted，看看是否有帮助。
控制台有错误吗？
如果你正在使用任何 css 或者如果这是在一个模式中，请检查 z-index。引导日期选择器使用 1000 的 z-index，因此它可能会显示，但在现有内容下。
repo vuejs-datepicker 似乎不再活跃。

标签： asp.net-mvc datepicker vuejs2

【解决方案1】：

我在嵌入需要初始化的 Jquery 元素时发现的技巧是使用 v-if 将它们放置在隐藏元素中。根据 Vuejs 的文档， v-if 在满足 v-if 条件之前不会渲染该元素。因此，在您以编程方式将它们设置为之前，这些项目不在 DOM 中。在这种情况下，给你一个很棒的事件来添加 jquery init 语句。

将您的日期选择器放在基于 v-if 的 div 中

<div v-if="show"></div>

在内部安装我做这样的事情

async mounted() {
    this.show = true

    $('select', this.$el).selectpicker();
    $('.datepicker', this.$el).datepicker({format: 'mm/dd/yyyy', orientation: 'bottom auto'});

    //this is how you allow datepicker to send its value to v-model on the input field
    $('.datepicker').change(function() {
        $(this)[0].dispatchEvent(new Event('input'));
    });
}

【讨论】：