詳解Vue.js和layui日期控件沖突問(wè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è)屬性賦值就好了.
<input type="text" id="beginTime" name="teacherLeave.leaveBegin" v-model="teacherLeave.leaveBegin" class="layui-input">開(kāi)始時(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頁(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ō)明賦值成功 }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue微信分享 vue實(shí)現(xiàn)當(dāng)前頁(yè)面分享其他頁(yè)面
這篇文章主要為大家詳細(xì)介紹了vue微信分享功能,vue實(shí)現(xiàn)當(dāng)前頁(yè)面分享其他頁(yè)面,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-12-12詳解vue2.0監(jiān)聽(tīng)屬性的使用心得及搭配計(jì)算屬性的使用
這篇文章主要介紹了vue2.0之監(jiān)聽(tīng)屬性的使用心得及搭配計(jì)算屬性的使用,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-07-07解決Vue_localStorage本地存儲(chǔ)和本地取值問(wèn)題
這篇文章主要介紹了解決Vue_localStorage本地存儲(chǔ)和本地取值問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07vue項(xiàng)目不能使用localhost訪問(wèn)的解決
這篇文章主要介紹了vue項(xiàng)目不能使用localhost訪問(wèn)的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-04-04解決vue項(xiàng)目中出現(xiàn)Invalid Host header的問(wèn)題
這篇文章主要介紹了解決vue項(xiàng)目中出現(xiàn)"Invalid Host header"的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11vscode中vue-cli項(xiàng)目es-lint的配置方法
本文主要介紹vscode中 vue項(xiàng)目es-lint的配置方法,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的的朋友參考下吧2018-07-07基于Vue+elementUI實(shí)現(xiàn)動(dòng)態(tài)表單的校驗(yàn)功能(根據(jù)條件動(dòng)態(tài)切換校驗(yàn)格式)
這篇文章主要介紹了Vue+elementUI的動(dòng)態(tài)表單的校驗(yàn)(根據(jù)條件動(dòng)態(tài)切換校驗(yàn)格式),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04vue頁(yè)面更新patch的實(shí)現(xiàn)示例
這篇文章主要介紹了vue頁(yè)面更新patch的實(shí)現(xiàn)示例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03vue項(xiàng)目創(chuàng)建并引入餓了么elementUI組件的步驟
這篇文章主要介紹了vue項(xiàng)目創(chuàng)建并引入餓了么elementUI組件的步驟,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-04-04