Vuejs的Datepicker
[英]Datepicker with Vuejs
問題描述
我真的想了解當jquery中的datepicker更改值時如何將值綁定到我的vue模型。 我有一支代碼筆，顯示我在這里談論的內容： https : //codepen.io/squidwurrd/pen/mpOKya
<div id="app">
<input id="datepicker" v-model="date">
</div>
值明顯改變，但模型未更新。 我對vue相當陌生，並不真正了解如何使其與其他庫一起使用。 請幫忙。
謝謝
1 個解決方案
解決方案1
6 已采納 2017-12-25 04:20:25
您可以使用已mounted生命周期掛鈎來創建日期選擇器，並綁定日期選擇器的onSelect事件以更新當前模型。
mount：我們需要使用它，因為date-picker在
Vue內部，並且我們需要在Vue准備就緒時對其進行初始化，以便可以綁定事件。
您可以在下面看到工作示例。
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>
jQuery DatePicker-DatePicker不是函數
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.