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

Vue似乎正在提交表单，然后在隐藏表单输入中更新值

1 个答案: