Vue中data數據,使用v-model屬性綁定第三方插件(例如Jquery的日期插件)無法自動更新

問題原因就是html結合Vue使用，但是項目又使用了第三方日期控件，這會導致日期值選擇形式的更新后，而Vue管理的對應v-model字段並未自動更新，這是因為日期控件未觸發Input事件，需要我們在值更新后手動觸發Input事件。

 

這里需要一個注意點，就是不要使用Jquery的trigger方法進行觸發事件，因為Vue的v-model的input事件綁定的形式是通過原生綁定的；而我認為 Jquery.trigger(eventName) 只能觸發由Jquery通過jquery.on函數進行綁定的事件。

let test = document.querySelector("#test")

// Jquery 綁定事件
$(test).on("input",()=>console.log("Jquery Event 01"))

// Js 綁定事件
test.addEventListener("input",()=>console.log("Js Event 02"))


// Jquery 觸發事件
$(test).trigger("input") // 這里應該只打印了 ”Jquery Event 01“ 信息，而JS原生綁定的事件並未觸發

// JS 觸發事件
test.dispatchEvent(new Error("input")) // 這里應該先后觸發了Jquery和JS的Input事件

由此示例可以說明，如果需要觸發原生綁定的事件，需要使用dispatchEvent進行觸發

 

總結就是，如果想讓Vue響應Input事件的v-model字段的更新，需要觸發原生的事件即可。。。

 

 

 

 

 

 

 

附上Vue集成第三方日期控件不自動更新值的解決方法：

第三方日期Jquery控件：http://www.malot.fr/bootstrap-datetimepicker

解決方案：

　　1.在bootstrap-datetimepicker.js文件里定位到 _setDate 方法

 

 

 

this.element.get(0).dispatchEvent(new Event("input"))