检测输入值的变化 - vue2答案

【问题标题】：Detecting changes to an input value - vue2检测输入值的变化 - vue2
【发布时间】：2018-06-13 09:50:09
【问题描述】：

我正在为 vue2 使用 date time picker component。虽然它渲染得很好并且似乎在基本用法中运行良好，但我无法检测到 vue 组件中输入值的变化。我尝试将@change 添加到组件实例中，尽管它似乎永远不会触发。知道这是为什么吗？注意，v-model成功更新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/

【问题讨论】：

标签： javascript typescript vue.js vuejs2

【解决方案1】：

我已经看到您用于日期时间选择器的包，我怀疑它们是否支持@change 事件。你确定他们知道吗？

不过，作为一种解决方法，您可以使用计算属性或观察者来观察value 变量的变化。这是更新的小提琴https://jsfiddle.net/aw5g3q9x/2/

【讨论】：

【解决方案2】：

当你给组件标签添加事件监听器（比如@change="someEvent()"）时，Vue 会监听组件发出的custom 事件。 <date-picker> 组件从不发出自定义的 change 事件。 Looking at the documentation，它似乎只在按下可选的“确定”按钮时才会发出 confirm 事件。

您最好的选择是在cool 属性上设置一个观察器，以便在cool 的值发生变化时触发someEvent 方法：

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

为了将来参考，如果组件的根元素是 input，您可以使用 .native 修饰符来监听该 input 元素的更改 DOM 事件，例如 @change.native="someEvent()"。但是，<date-picker> 组件的根元素是 div，因此在这种情况下不起作用。

【讨论】：

【解决方案3】：

我不知道日期选择器，但在您的情况下，您可以使用变量更改观察器

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>

【讨论】：