失去焦点时绑定到vue v模型的bootstrap-datepicker恢复为先前的数据 [英] bootstrap-datepicker bound to vue v-model reverts to previous data when losing focus
问题描述
我有一种形式，其中日期选择器跟随文本输入.输入文本后，日期选择器会从ajax调用中接收日期.现在，重点放在日期选择器上，该显示器(按预期方式)显示了接收日期.当用户切换到下一个输入时，日期选择器将还原为其先前的数据，在大多数情况下，该数据最终将成为占位符.
I have a form where a datepicker follows a text input. After the text input has been given, the datepicker receives a date from an ajax call. The focus is now on the datepicker, which shows (as expected) the received date. When the user tabs to the next input, the datepicker reverts to its previous data, which ends up being the placeholder in most cases.
vue应用代码:
var app = new Vue({
el: "#app",
data: {
theDate: '',
aNumber: 0,
bNumber: 0
},
mounted() {
$("#aDate").datepicker({
format: 'dd/mm/yyyy'
});
$("#aDate").datepicker().on(
"changeDate", () => {
this.theDate = $('#aDate').val()
}
);
},
methods: {
check() {
console.log('theDate: ' + this.theDate + ', aNumber: ' + this.aNumber + ', bNumber: ' + this.bNumber);
},
setDate() {
this.theDate = '18/12/2018';
}
}
})
还有html:
<body>
<div id="app">
<input type="text" id="bNumber" v-model="bNumber" /><br>
<input type="text" id="aDate" placeholder="mm/dd/yyyy" v-model="theDate" /><br>
<input type="text" id="aNumber" v-model="aNumber" /><br>
<button type="button" @click="check">Check</button>
<button type="button" @click="setDate">Set Date</button>
</div>
</body>
如果遵循以下步骤，可以在此小提琴中观察到
This can be observed in this fiddle if following these steps
- 在顶部输入中输入任意数字
- 然后将选项卡转到日期选择器输入
- 单击设置日期"按钮(模拟接收到的数据)
- 然后通过单击再次选择输入日期选择器
- 现在跳出至下一个输入
- 日期选择器中的日期已恢复为先前的值
如何防止这种情况并使数据持久化?
How can this be prevented and the data be made persistent?
我已经尝试过此问题中的解决方案，但是该行为一样.
I have tried the solution from this question but the behaviour is the same.
推荐答案
问题是实际的日期值由datepicker控制，在这种情况下，使用v-model没有意义.如此之多，以致theDate设置为任何值并不会真正影响任何东西.这是可以理解的，因为您使用的是具有jQuery依赖项的Bootstrap.我建议使用 Vue-flatpickr 作为替代方案.但是，如果您需要坚持这一点，这里有一个可能的解决方法:
The problem is the actual date value being controlled by the datepicker, in which case there's no point in using v-model. So much that setting the theDate to any value does not really affect anything. This is understandable since you are using Bootstrap which has a jQuery dependency. I would recommend Vue-flatpickr as an alternative. But if you need to stick with this, here's a possible fix:
为简洁起见，我删除了不必要的属性:
I've removed unnecessary attributes for brevity:
<input type="text" ref="datepicker" placeholder="mm/dd/yyyy" />
var app = new Vue({
el: "#app",
data: {
theDate: '',
aNumber: 0,
bNumber: 0
},
mounted() {
$(this.$refs.datepicker).datepicker({
format: 'dd/mm/yyyy'
})
.on("changeDate", e => {
this.update(e.target.value);
});
},
methods: {
check() {
console.log('theDate: ' + this.theDate + ', aNumber: ' + this.aNumber + ', bNumber: ' + this.bNumber);
},
setDate() {
this.update('18/12/2018');
},
update(value) {
$(this.$refs.datepicker).datepicker("update", value);
}
}
})
基本上，您需要使用提供的API更新日期.
这篇关于失去焦点时绑定到vue v模型的bootstrap-datepicker恢复为先前的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
