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每个Vue实例上提供的方法this.$nextTick.此方法允许您在Vue实例的模板完成更新后传递回调以执行.

在您的情况下,您可以这样做:

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