Обновление Vue DOM не происходит при первом клике, работает при последующих кликах

Question

У меня есть приложение Vue для динамической формы с двумя кнопками, и мне нужно отправить запрос, на который была нажата кнопка. Я делаю это, обновляя значение скрытого поля ввода, а затем отправляю форму с помощью jQuery. По какой-то причине, хотя в первый раз, когда я нажимаю кнопку, которая устанавливает скрытый ввод на true, он отправляет false изначально, но последующие щелчки отправят соответствующее значение.

Ниже приведен небольшой фрагмент того, что я, по сути, делаю без фактического запроса jQuery. Я вижу, что значение обновлено правильно, поэтому я не уверен, является ли это состояние гонки или я пропускаю что-то очевидное.

<form id="myVueForm">
  <input type="hidden" name="submitEdit" :value="submitEdit">
  <button type="button" @click="submitEdit = true">Submit Edit</button>
  <button type="button" @click="submitEdit = false">Submit without Edit</button>
</form>

var myApp = new Vue({
  el: '#myVueForm',
  data: function() {
    return {
      submitEdit: false
    }
  },
  watch: {
    'submitEdit': function(value) {
      console.log(this.submitEdit, "submitEdit value");
      console.log('Submitting form!');
    }
  }
})

https://codepen.io/anon/pen/jvGXLG?editors=1111

Answer 1

Механизм обновления Vue по своей природе несколько асинхронный. Если вы делаете что-то сразу после внесения изменений в его виртуальную DOM, непосредственный код выполняется первым даже до применения обновления к Vue DOM. Вы должны использовать .$nextTick(), чтобы выполнить вещи ПОСЛЕ фактического обновления (следующий тик) для виртуального DOM.

'submitEdit': function(value) {
   this.$nextTick(function(){
      console.log(this.submitEdit, "submitEdit value");
      console.log('Submitting form!');
   });
 }