vue.js表单提交没有得到模型绑定

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>

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

当我按一下按钮，它将发送的值：1

我确定该值在表单提交前已修改

来源

2017-08-28 Gary

你不读以任何方式查询参数值，以便你在代码中指定的值将被用来代替。 –

@SamiKuhmonen我不明白你的意见是什么，输入将与模型绑定myValue – Gary

是的，它会。然后你发送你的表单，这将导致重新加载页面，所有内容都将被重置。 –

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

对于您的情况，当您访问表单并提交时，绑定输入未更新为新值myValue。

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

在你的情况，你可以这样做：

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

来源

2017-08-28 13:10:26 thanksd

vue.js表单提交没有得到模型绑定

回答

相关问题