javascript - 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 进行实际更新(下一个 tick)之后执行操作。

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