檢測輸入值的更改-vue2

Question

我正在為vue2使用日期時間選擇器組件 。 盡管它可以很好地呈現並且似乎可以在基本用法下正常運行，但是我無法檢測到vue組件中輸入值的更改。 我嘗試將@change添加到組件實例，盡管它似乎從未觸發過。 知道為什么會這樣嗎？ 注意，v模型成功更新cool的值。

Vue方法

 export default {
        ...           
        methods: {
          someEvent() {
            alert("SUCCESS"); //this never fires
          }

Vue標記

                       <date-picker
                                v-model="cool"
                                lang="en"
                                type="datetime"
                                input-class="date-time-picker"
                                format="MM/DD/YYYY hh:mm A"
                                @change="someEvent()"
                                :confirm="true"
                        >
                        </date-picker>

JsFiddle： https ：//jsfiddle.net/aw5g3q9x/

Answer 1

我不知道日期選擇器，但是在您的情況下，您可以使用變量更改監視程序

 Vue.use(window.DatePicker.default) new Vue({ el: '#app', data () { return { value: '' } }, watch: { value() { alert("OK"); } } }) 

 <script src="//unpkg.com/vue/dist/vue.js"></script> <script src="//rawgit.com/mengxiong10/vue2-datepicker/master/dist/build.js"></script> <div id="app"> <date-picker v-model="value" lang="en" type="datetime" format="yyyy-MM-dd hh:mm:ss a" :time-picker-options="{ start: '00:00', step: '00:30', end: '23:30' }"></date-picker> {{ value }} </div> 

Answer 2

將事件偵聽器添加到組件標簽（例如@change="someEvent()" ）時，Vue將偵聽要從組件發出的自定義事件。 <date-picker>組件從不發出自定義change事件。 查看文檔 ，似乎只有在按下可選的“確定”按鈕時，它才會發出confirm事件。

你最好的選擇是設置在觀察者cool屬性火someEvent方法時的值cool的變化：

watch: {
  cool() {
    this.someEvent();
  }
}

---

供將來參考，如果組件的根元素是input ，則可以使用.native修飾符來監聽該input元素的change DOM事件，例如@change.native="someEvent()" 。 但是， <date-picker>組件的根元素是div ，因此在這種情況下不起作用。

Answer 3

我已經看到了您用於日期時間選擇器的軟件包，並且我懷疑它們是否支持@change事件。 您確定他們這樣做嗎？

但是，要解決此問題，可以使用計算屬性或觀察程序來監視value變量中的更改。 這是更新的小提琴https://jsfiddle.net/aw5g3q9x/2/