Vue.js | Manually Triggered Events Breaking Model Synchronization?

I am having some issues with one of my modules. Consider the following example: Why won't model (and view) update after dispatching a 'change' event right before I want to assig

Solution 1:

You're working with the DOM when you should be working with the viewmodel. You've bound value to your textarea, and then you want to notice changes, right? Since you're modeling the textarea this way, you should watch the bound variable rather than the DOM element.

If you want to signal an event within Vue to trigger a handler, you should use Vue events, not DOM Events. As a general rule, strongly prefer manipulating your Vue over touching the DOM.

Setting async to false allows you to see all the changes, which otherwise happen so fast that some get debounced.

Vue.config.async = false;

var vm = newVue({
  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'

<textareaid='test'v-model='value'></textarea><scriptsrc="https://vuejs.org/js/vue.js"></script>

Solution 2:

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 = newVue({
  el: '#test',
  data: {
    value: 'initial value'
  },
  methods: {
    changeHandler: function() {
      console.log('changed!')
    }
  }
});

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

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

<textareaid='test'v-model='value'v-on:change="changeHandler"></textarea><scriptsrc="https://vuejs.org/js/vue.js"></script>