vue.js表单提交没有获得model-bind的新值

Question

我有一张表格

HTML：

<form ref="myForm" action="/AAA/BBB" method="get">
   <input type="text" hidden="hidden" v-model="myValue" name="myName" />
</form>
<button v-on:click="Send">Click me</button>

JS

new Vue({
   data: {
      myValue: 1
   },
   methods: {
      Send: function() {
         this.myValue = 2;
         this.$refs.myForm.submit();
      }
   }
})

当我点击按钮时，它会发送值：1

我确定在表单提交之前修改了值

Answer 1

在Vue实例的方法中设置数据属性的值时，在方法完成之前，任何与v-model绑定的元素都不会更新。

在您的情况下，当您访问表单并提交时，绑定输入未使用新值myValue进行更新。

要解决此问题，您可以使用Vue.nextTick方法，该方法可通过this.$nextTick在每个Vue实例上使用。此方法允许您在Vue实例模板完成更新后传递回调以执行。

在您的情况下，您可以这样做：

Send: function() {
  this.myValue = 2;
  this.$nextTick(() => {
    this.$refs.myForm.submit();
  });
}