事故還原:
今天在用layui的日期控件的時(shí)候發(fā)現(xiàn)一個(gè)問題,就是form表單中的日期選擇之后,如果后面的輸入框再輸入值,這個(gè)日期就會(huì)自動(dòng)清空,導(dǎo)致沒辦法提交,研究之后發(fā)現(xiàn)是vue的model綁定和layui沖突產(chǎn)生的,事實(shí)上是vue無法動(dòng)態(tài)綁定layui中獲取到的日期值,我們把那個(gè)v-model去掉就好,但是去掉的話就沒辦法動(dòng)態(tài)綁定后臺(tái)數(shù)據(jù).
下面是html+vuejs+layui
lyui通過use方法獲取到input的ID實(shí)現(xiàn)日期選擇,但是vue的model綁定和layui是有沖突的.
對(duì)于這個(gè)情況大概處理思路是這樣的:我們就不讓他自動(dòng)綁定了,把這個(gè)input的v-model屬性去掉,然后再form表單提交之前利用jquery手動(dòng)給這個(gè)屬性賦值就好了.
<input type="text" id="beginTime" name="teacherLeave.leaveBegin" v-model="teacherLeave.leaveBegin" class="layui-input">開始時(shí)間<input type="text" name="teacherLeave.reson" v-model="teacherLeave.reson" class="layui-input"><script>layui.use('laydate', function() { var laydate = layui.laydate; //執(zhí)行一個(gè)laydate實(shí)例 laydate.render({ elem : '#beginTime' }); });</script>下面是具體處理的偽代碼:
//模擬提交方法saveOrUpdate: function () { //輸出賦值之前的leaveBegin的值,為undefined //vm是vue.js頁面的一個(gè)data對(duì)象,這部分是vue.js的知識(shí),不用特別在意 alert(vm.teacherLeave.leaveBegin); //通過jquery獲取html頁面input的value值,并將這個(gè)值(即時(shí)間日期)賦給js中data的vm的teacherLeave屬性 vm.teacherLeave.leaveBegin = $('#beginTime').val(); //輸出賦值之后的leaveBegin的值,作對(duì)比 alert(vm.teacherLeave.leaveBegin); //獲取的值不一樣,說明賦值成功 }以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
