问题描述
我真的想了解当jquery中的datepicker更改vue模型时，如何将这些值绑定到我的vue模型.我有一支代码笔，显示我在这里谈论的内容: https://codepen.io/squidwurrd/pen/mpOKya
Im really trying to understand how I can bind the values to my vue model when it gets changed by the datepicker in jquery. I have a code pen showing what im talking about here: https://codepen.io/squidwurrd/pen/mpOKya
<div id="app">
<input id="datepicker" v-model="date">
</div>
值明显改变，但模型未更新.我对vue相当陌生，并不真正了解如何使其与其他库一起使用.请帮忙.
The value changes obviously but the model is not updated. Im fairly new to vue and dont really understand how to get it to work with other libraries. Please help.
谢谢
推荐答案
您可以使用 Mounted 生命周期挂钩创建日期选择器并绑定日期选择器 onSelect 事件更新当前模型.
You can use mounted life-cycle hook for creating your datepicker and bind date-picker onSelect event to update current model.
您可以在下面看到工作示例.
you can see working example below.
new Vue({
el: '#app',
data: {
date: '',
},
mounted: function() {
var self = this;
$('#datepicker').datepicker({
onSelect:function(selectedDate, datePicker) {
self.date = selectedDate;
}
});
},
methods:{
}
})<!DOCTYPE html>
<html>
<head>
<script> console.info = function(){} </script>
<script src="https://vuejs.org/js/vue.js"></script>
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet" type="text/css" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>.half{width:50%;float:left;}</style>
</head>
<body>
<div id="app">
<input id="datepicker" v-model="date">
date: {{ date }}
</div>
</body>
</html>这篇关于Vuejs的Datepicker的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！