這篇文章主要介紹如何解決Vue.js和layui日期控件沖突的問(wèn)題，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)是一家專業(yè)提供邱縣企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、H5技術(shù)、小程序制作等業(yè)務(wù)。10年已為邱縣眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站建設(shè)公司優(yōu)惠進(jìn)行中。

事故還原:

在用layui的日期控件的時(shí)候發(fā)現(xiàn)一個(gè)問(wèn)題,就是form表單中的日期選擇之后,如果后面的輸入框再輸入值,這個(gè)日期就會(huì)自動(dòng)清空,導(dǎo)致沒(méi)辦法提交,研究之后發(fā)現(xiàn)是vue的model綁定和layui沖突產(chǎn)生的,事實(shí)上是vue無(wú)法動(dòng)態(tài)綁定layui中獲取到的日期值,我們把那個(gè)v-model去掉就好,但是去掉的話就沒(méi)辦法動(dòng)態(tài)綁定后臺(tái)數(shù)據(jù).

下面是html+vuejs+layui

lyui通過(guò)use方法獲取到input的ID實(shí)現(xiàn)日期選擇,但是vue的model綁定和layui是有沖突的.

對(duì)于這個(gè)情況大概處理思路是這樣的:我們就不讓他自動(dòng)綁定了,把這個(gè)input的v-model屬性去掉,然后再form表單提交之前利用jquery手動(dòng)給這個(gè)屬性賦值就好了.

開(kāi)始時(shí)間

下面是具體處理的偽代碼:

//模擬提交方法
saveOrUpdate: function () {
   //輸出賦值之前的leaveBegin的值,為undefined
   //vm是vue.js頁(yè)面的一個(gè)data對(duì)象,這部分是vue.js的知識(shí),不用特別在意
   alert(vm.teacherLeave.leaveBegin);
   //通過(guò)jquery獲取html頁(yè)面input的value值,并將這個(gè)值(即時(shí)間日期)賦給js中data的vm的teacherLeave屬性
   vm.teacherLeave.leaveBegin = $('#beginTime').val();
   //輸出賦值之后的leaveBegin的值,作對(duì)比
   alert(vm.teacherLeave.leaveBegin);
   //獲取的值不一樣,說(shuō)明賦值成功
   }

以上是“如何解決Vue.js和layui日期控件沖突的問(wèn)題”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！