Vue.js |手动触发事件破坏模型同步？答案

【问题标题】：Vue.js | Manually triggered events breaking model synchronization?Vue.js |手动触发事件破坏模型同步？
【发布时间】：2017-01-13 23:07:57
【问题描述】：

我的一个模块有一些问题。

考虑以下示例：

Vue.config.async = false; // if I remove this, it stays at initial value

var vm = new Vue({
  el: '#test',
  data: {
  	value: 'initial value'
  },
  methods: {
    changeHandler: function () {
      console.log('changed!')
    }
  }
});

vm.value = 'value change 1';
vm.$el.dispatchEvent(new Event('change'));
vm.value = 'value change 2';
vm.$el.dispatchEvent(new Event('change'));

console.log(vm.value); // 'value change 1'

<textarea id='test' v-model='value' v-on:change="changeHandler"></textarea>

<script src="https://vuejs.org/js/vue.js"></script>

为什么在我要分配新值之前调度“更改”事件后模型（和视图）不更新？

这是 Vue 的问题还是我做错了什么？

【问题讨论】：

标签： javascript vue.js mvvm frameworks dom-events

【解决方案1】：

当您应该使用视图模型时，您正在使用 DOM。您已将value 绑定到您的文本区域，然后您想注意更改，对吗？由于您以这种方式对 textarea 进行建模，因此您应该 watch 绑定变量而不是 DOM 元素。

如果你想在 Vue 中发送一个事件来触发一个处理程序，你应该使用Vue events，而不是 DOM 事件。作为一般规则，强烈喜欢操纵 Vue 而不是接触 DOM。

将async 设置为false 可以让您查看所有更改，否则这些更改会发生得如此之快，以至于有些会被去抖动。

Vue.config.async = false;

var vm = new Vue({
  el: '#test',
  data: {
    value: 'initial value'
  },
  watch: {
    value: function() {
      console.log('changed!')
    }
  }
});

vm.$on('valueChange', function() {
  console.log('value change!');
});

vm.value = 'value change 1';
vm.$dispatch('valueChange');
vm.value = 'value change 2';
vm.$dispatch('valueChange');

console.log(vm.value); // 'value change 2'

<textarea id='test' v-model='value'></textarea>

<script src="https://vuejs.org/js/vue.js"></script>

【讨论】：

感谢您的解释，但我应该在前面提到我需要为我的模块单元测试执行此操作。所以我真的需要那个“改变”事件。基本上，我的模块具有阻止添加类的内部功能，直到出现（本机）更改事件。我真正的问题是 - 如何调用 v-on:change 和 v-on:keyup 处理程序手动？

【解决方案2】：

您对change 事件的使用干扰了正常的事件处理。如果您给每个事件一点时间（请参阅我的 sn-p 中的 nextTick 调用），事情就会按预期进行。

var vm = new Vue({
  el: '#test',
  data: {
    value: 'initial value'
  },
  methods: {
    changeHandler: function() {
      console.log('changed!')
    }
  }
});

vm.value = 'value change 1';
Vue.nextTick(() => vm.$el.dispatchEvent(new Event('change')));
Vue.nextTick(() =>vm.value = 'value change 2');
Vue.nextTick(() => vm.$el.dispatchEvent(new Event('change')));

console.log(vm.value); // 'value change 1'

<textarea id='test' v-model='value' v-on:change="changeHandler"></textarea>

<script src="https://vuejs.org/js/vue.js"></script>

【讨论】：