我试图使用bootstrap-datepicker与Vue.js尝试创建一个简单的datepicker组件.问题是,当我写入输入时,组件的数据会更新.但是当我使用datepicker gui时,它不起作用.数据未更新.为什么？究竟缺少什么？
这是我的代码:
Vue.component('picker', {
'props': {
'date': {
'twoWay': true
}
},
'template': '\
\
\
\
\
\
\
\
',
'watch': {
'date': function(value) {
console.log('Updated!');
}
},
'mounted': function() {
$(this.$el.firstChild).datetimepicker();
}
});
app = new Vue({
'el': '#app',
'data': {}
});
我找不到比丢失焦点(模糊)更好的方法.
这是我的代码:
Vue.component('picker', {
'props': ['date'],
'template': '\
\
\
\
\
\
\
\
',
'mounted': function() {
$(this.$el.firstChild).datetimepicker();
},
'methods': {
'datepick_dialog_open': function() {
this.$el.firstChild.children[1].click();
},
'select_by_lose_focus': function() {
console.log('AHOY!');
this.date = this.$el.firstChild.firstChild.value;
}
}
});
app = new Vue({
'el': '#app',
'data': {}
});
关键是,如果你的元素没有失去焦点,你真的不能使用它.当输入失去焦点时,它会更新数据.IDK有更好的方法.
v-on:focus是无关紧要的.它只是在输入获得焦点时打开日期时间选择器UI.
主要工作是完成的select_by_lose_focus.
京公网安备 11010802040832号 | 京ICP备19059560号-6 