詳解Vue.js和layui日期控件沖突問題解決辦法

發布于 2020-8-10|

復制鏈接

摘記: 事故還原:

今天在用layui的日期控件的時候發現一個問題,就是form表單中的日期選擇之后,如果后面的輸入框再輸入值,這個日期就會自動清空,導致沒辦法提交,研究之后發現是vue的model綁定和layui沖突產生的,事實上是vue無法動態綁定layui中獲取到的日期值,我們把那個v-model去 ..

事故還原:今天在用layui的日期控件的時候發現一個問題,就是form表單中的日期選擇之后,如果后面的輸入框再輸入值,這個日期就會自動清空,導致沒辦法提交,研究之后發現是vue的model綁定和layui沖突產生的,事實上是vue無法動態綁定layui中獲取到的日期值,我們把那個v-model去掉就好,但是去掉的話就沒辦法動態綁定后臺數據.下面是html+vuejs+layui

lyui通過use方法獲取到input的ID實現日期選擇,但是vue的model綁定和layui是有沖突的.

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

```javascript

開始時間

layui.use('laydate', function() {

var laydate = layui.laydate;

//執行一個laydate實例

laydate.render({

elem : '#beginTime'

});

});

```

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

```javascript

//模擬提交方法

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);

//獲取的值不一樣,說明賦值成功

}

```

總結

以上是生活随笔為你收集整理的layui日期与vue_详解Vue.js和layui日期控件冲突问题解决办法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。