带有 Vuejs 的日期选择器
Posted
技术标签:
【中文标题】带有 Vuejs 的日期选择器【英文标题】：Datepicker with Vuejs 【发布时间】：2018-06-06 12:33:27 【问题描述】：我真的很想了解当 jquery 中的 datepicker 更改值时如何将值绑定到我的 vue 模型。我有一支代码笔显示我在这里谈论的内容：https://codepen.io/squidwurrd/pen/mpOKya
<div id="app">
<input id="datepicker" v-model="date">
</div>
值明显变化，但模型没有更新。我对 vue 相当陌生，并不真正了解如何让它与其他库一起使用。请帮忙。
谢谢
【问题讨论】：
你需要一个包装器组件。 ***.com/a/43255516/392102 【参考方案1】：您可以使用mounted 生命周期钩子来创建您的日期选择器并绑定日期选择器onSelect 事件以更新当前模型。
mounted ：我们需要使用它，因为 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>.halfwidth:50%;float:left;</style>
</head>
<body>
<div id="app">
<input id="datepicker" v-model="date">
date: date
</div>
</body>
</html>【讨论】：
您应该使用 this._uid 作为 datepicker id 以允许多个 Vue 组件。 我很抱歉，但这里的重点不是制作好组件或坏组件，我只是回答您关于它如何工作的问题。如果用户问我需要制作多个组件，那么答案会有所不同，它很简单。 顺便说一下@Sebi2020，我很了解组件样式，哪些是好的，哪些不是，但是对于这个问题，这个答案就足够了。以上是关于带有 Vuejs 的日期选择器的主要内容，如果未能解决你的问题，请参考以下文章
计算属性设置器导致 vuejs / javascript 在日期选择器焦点上崩溃浏览器
带有手动输入和动态最小日期的 jQuery UI 日期选择器