Vue似乎是在更新隐藏表单输入值之前提交表单

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!');
   });
 }