Vue.js |手动触发的事件会破坏模型同步吗? [英] Vue.js | Manually triggered events breaking model synchronization?

问题描述

我的一个模块有问题.

考虑以下示例:

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>

为什么在我要分配新值之前立即调度更改"事件后不建模(并查看)更新?

Why won't model (and view) update after dispatching a 'change' event right before I want to assign a new value?

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

Is this a problem with Vue or am I just doing something incorrectly?

推荐答案

您对 change 事件的使用会干扰正常的事件处理.如果您给每个事件花一点时间(请参见 nextTick 在我的摘要中调用)，一切按预期进行.

Your use of the change event is interfering with normal event processing. If you give each event a little bit of time (see the nextTick calls in my snippet), things work out as expected.

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>

这篇关于Vue.js |手动触发的事件会破坏模型同步吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！