检测输入值的更改 - vue2

Question

我正在使用vue2 的日期时间选择器组件。虽然它渲染得很好并且似乎在基本用法中运行良好，但我无法检测到 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/

Answer 1

当您向组件标签添加事件侦听器（例如@change="someEvent()"）时，Vue 将侦听从组件发出的自定义事件。该<date-picker>组件从不发出自定义change事件。查看文档，它似乎仅confirm在按下可选的“确定”按钮时才会发出事件。

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

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

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