詳解Vue.js和layui日期控件沖突問題解決辦法
更新時間：2019年07月25日 10:21:31 作者：風一瞬
這篇文章主要介紹了詳解Vue.js和layui日期控件沖突問題解決辦法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
事故還原:
今天在用layui的日期控件的時候發(fā)現(xiàn)一個問題,就是form表單中的日期選擇之后,如果后面的輸入框再輸入值,這個日期就會自動清空,導致沒辦法提交,研究之后發(fā)現(xiàn)是vue的model綁定和layui沖突產(chǎn)生的,事實上是vue無法動態(tài)綁定layui中獲取到的日期值,我們把那個v-model去掉就好,但是去掉的話就沒辦法動態(tài)綁定后臺數(shù)據(jù).
下面是html+vuejs+layui
lyui通過use方法獲取到input的ID實現(xiàn)日期選擇,但是vue的model綁定和layui是有沖突的.
對于這個情況大概處理思路是這樣的:我們就不讓他自動綁定了,把這個input的v-model屬性去掉,然后再form表單提交之前利用jquery手動給這個屬性賦值就好了.
<input type="text" id="beginTime" name="teacherLeave.leaveBegin" v-model="teacherLeave.leaveBegin" class="layui-input">開始時間
<input type="text" name="teacherLeave.reson" v-model="teacherLeave.reson" class="layui-input">
<script>
layui.use('laydate', function() {
var laydate = layui.laydate;
//執(zhí)行一個laydate實例
laydate.render({
elem : '#beginTime'
});
});
</script>
下面是具體處理的偽代碼:
//模擬提交方法
saveOrUpdate: function () {
//輸出賦值之前的leaveBegin的值,為undefined
//vm是vue.js頁面的一個data對象,這部分是vue.js的知識,不用特別在意
alert(vm.teacherLeave.leaveBegin);
//通過jquery獲取html頁面input的value值,并將這個值(即時間日期)賦給js中data的vm的teacherLeave屬性
vm.teacherLeave.leaveBegin = $('#beginTime').val();
//輸出賦值之后的leaveBegin的值,作對比
alert(vm.teacherLeave.leaveBegin);
//獲取的值不一樣,說明賦值成功
}
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
vue2使用ts?vue-class-component的過程
vue-property-decorator?是一個?Vue.js?的裝飾器庫,它提供了一些裝飾器來讓你在?Vue?組件中定義屬性、計算屬性、方法、事件等,本文給大家介紹vue2使用ts?vue-class-component的相關知識,感興趣的朋友一起看看吧2023-11-11
這篇文章主要為大家詳細介紹了Vue異步組件的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
Element實現(xiàn)動態(tài)增加多個輸入框并校驗
本文主要介紹了Element實現(xiàn)動態(tài)增加多個輸入框并校驗，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-07-07
vue組件中iview的modal組件爬坑問題之modal的顯示與否應該是使用v-show
這篇文章主要介紹了vue組件中iview的modal組件爬坑問題之modal的顯示與否應該是使用v-show,本文通過實例圖文相結合的形式給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-04-04
這篇文章主要為大家詳細介紹了vue實現(xiàn)登錄驗證碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要為大家詳細介紹了elementUI實現(xiàn)級聯(lián)選擇器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
vue-devtools 是一款基于chrome游覽器的插件，用于調試vue應用，這篇文章分步驟給大家介紹了vue-devtools的安裝方法，需要的朋友參考下吧2018-04-04
這篇文章主要為大家詳細介紹了vue大屏展示適配，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
這篇文章主要介紹了詳解vue移動端項目的適配(以mint-ui為例)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了一個Vue的內(nèi)存泄露詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2021-10-10