Question

我正在使用date time picker component作为vue2。虽然它呈现得很好并且似乎与基本用法运行良好，但我无法检测到vue组件中输入值的更改。我尝试将@change添加到组件实例中，尽管它似乎永远不会触发。知道为什么会这样吗？注意，v-model会成功更新cool的值。

Vue Methods

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

Vue Markup

                       <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

我不知道datepicker，但在你的情况下你可以使用变量观察器

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事件。 Looking at the documentation，它似乎只会在可选的＆＃34; OK＆＃34;时发出confirm事件。按下按钮。

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

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

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

Answer 3

我已经看到您用于日期时间选择器的包，我怀疑他们支持@change事件。你确定他们这样做了吗？

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

检测输入值的变化 - vue2

3 个答案: