jquery datetimepicker时间控件与Vue实现双向绑定,解决vue中无法绑定值的问题

jquery datetimepicker时间控件与Vue实现双向绑定,解决vue中无法绑定值的问题,第1张

这里的 jquery datetimepicker指的不是bootstrap版本

而是:
https://www.datetimepicker.cn/download/ 版本

问题:
当选定datetimepicker日期时,并没有给vue v-model 变量绑定值,但给v-model 设定值时,datetimepicker会取到值关响应

解决思路,jquery datetimepicker 没有设定v-model控件变量值,那提交表单时通过Jquery标签取值绑给v-model。

Html代码:

<div class="" id="app">				      
	<input type="text" id="datetimepicker1" class="form-control form-control-sm" v-model="model.expire_time" autocomplete="off">
div>

js代码:

<script type="text/javascript">
	var app = new Vue({
	  el: '#app',
	  data: {
	  	model : {expire_time: '',}
	  },
	 methods: {
 		update(){
	   		this.model.expire_time=$('#datetimepicker1').val();
	    	axios.post('/user/save.html',
	    			this.model,
	    			{headers: {}}).then(
	    			res => (
	    				(res.data.code === 0)?(
	    					$('#myModal').modal("hide"),
		    				location.reload(true)
	    				)
	    				:
	    				(
	    					this.error = res.data.message
	    				)
	    			)
	    				
	    		)
	        .catch(function (error) { // 请求失败处理
	            console.log(error);
	          });
	      },
	      dateInit: function() {
	    	var self = this;
	    	var date = new Date();
			$.datetimepicker.setLocale('zh');
			$('#datetimepicker1').datetimepicker({
				theme:'default',
				format:'Y-m-d',
				defaultDate:new Date(),
				timepicker:false
		    });
		}
	},
	mounted: function() {
	  this.dateInit()
	}
});
</script>

注意:
这里用mounted()引入jquery事件,执行update()时通过
this.model.expire_time = $(‘#datetimepicker1’).val();进行绑定。

欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/web/1320470.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-06-11
下一篇 2022-06-11

发表评论

登录后才能评论

评论列表(0条)

保存