[Vue] 解決使用 bootstrap-datepicker 搭配 Vue 2 取不到值的問題

有些好用的 JavaScript UI plugin 在一般使用下很方便，但是剛好在搭配 Vue.js v2 就出現非預期的問題

在設計輸入日期欄位，用 HTML5 有 date 的輸入型態可以用，但是若是只想取年份跟月份，藉助 datepicker 就很方便

這回採用 bootstrap-datepicker 這個 plugin

問題：

以一般使用方法沒問題，不過用了 v-model 的 data bind 屬性後，雖然在 UI 看起來無異，但是 Vue 就是讀不到值

解決方法：

在 mounted() 去監聽 datepicker 的 changeDate 事件

	// https://github.com/uxsolutions/bootstrap-datepicker
	const app = new Vue({
	el: '#app',
	data: {
	startDate: '',
	},
	mounted() {
	// listen to changeDate event in mounted()
	$('#startDate').datepicker().on(
	'changeDate', () => { this.startDate = $('#startDate').val() }
	);
	}
	});

view raw app.js hosted with ❤ by GitHub

參考連結：

• when use vue2.0 and bootstrap-datepicker, and use v-model can not get the date value.

[JavaScript] 解決在 IE 11 出現 'Promise' 未經定義的錯誤

又是一個遇到老瀏覽器不支援新東西的問題

自從拔掉 jQuery 的 $.ajax，改採用 axios 處理非同步資料讀取，IE 11 噴出以下訊息



在不想改變現有寫法下，找到解決的方法，直接用 Promise Polyfill。

Lightweight ES6 Promise polyfill

可以直接引用 CDN

<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script>

或是下載檔案使用

實驗結果，以最快速確認可行性，就是直接引入 CDN，結果成功！還好不用再改寫法～收工，繼續下一題。