vue 提交带有更新输入值的表单

Question

我有一个简单的隐藏表格

<template>
  <form ref="form" method="POST" action="https://target.com/post" accept-charset="utf-8">
    <input type="hidden" name="data" :value="myData"/>
    <input type="hidden" name="signature" v-model="mySignature" />
    <input ref="submit" type="submit">
  </form>
</template>

并且我希望附加到不同按钮 ( v-on:click="submitForm") 的方法提交此表单设置数据。

export default {
  name: 'MyComponent',
  methods: {
    submitForm() {
      // should update values for inputs
      this.myData = 'dynamically calculated';
      this.mySignature = 'creates signature from data';
      // submit the form with values above
      this.$refs.form.submit();
    },
  },
  data() {
    return {
      myData: null,
      mySignature: null,
    }
  }
}

但似乎我误解了反应性/绑定/参考？在 Vue 中，所以我试过了

• this.$refs.submit.click();
• this.$forceUpdate();
• 设置:value="myData"/v-model="myData"输入

并且这些方法都不起作用。表单发送时带有data/ 的空字段signature，因此似乎变量未更新或表单无法在一个函数调用中重新呈现。进行此类更新的正确方法是什么？

Answer 1

Vue 异步执行 DOM 更新。在您的情况下，DOM 更新不会在表单提交之前发生。

解决方法是使用$nextTick

this.$nextTick(() => {
    this.$refs.form.submit();
});