asp.net-mvc - Vue JS - 引导日期选择器不工作
问题描述
我试图通过动态添加它在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>
JS
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);
}
}
});
我不明白为什么这不起作用..
解决方案
我在嵌入需要初始化的 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'));
});
}
推荐阅读
- flutter - Flutter:使用 .addAll() 将字符串添加到 List
- swift - 在某些模拟器上无法播放声音
- reactjs - 渲染和子道具之间的反应路由器差异
- python-3.x - 如何在 python 的密码库中选择自己的密码?
- javascript - dayjs 是否支持月份的序数?(二月而不是二月,德语)
- connection - 离线留言
- maven - mvn pre-clean / clean / post-clean 有什么区别?
- xml - 有没有一种简单的方法来验证 svg/xml 的完整性?
- node.js - 是否可以使用为 Node.js 中的每个函数传递的参数打印异常调用堆栈?
- jquery - Asp.net core visual studio,刷新页面忽略缓存