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

Posted 2023-02-23

【中文标题】带有更新输入值的 vue 提交表单

【英文标题】：vue submit form with updated input values

【发布时间】：2021-08-02 00:52:20

【问题描述】：

我有一个简单的隐藏表单

<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 中的 reactivity/binding/refs?，所以我尝试过

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

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

【参考方案1】：

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

解决方法是使用$nextTick

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

【参考方案2】：

这似乎是 <form> 的问题，而不是反应性问题。

您已使用操作 action="https://target.com/post" 定义了一个 <form> 元素。这告诉浏览器处理您的表单，并将忽略任何 javascript 处理。当用户点击<input ref="submit" type="submit">时

如果您正在构建 SPA，您可能应该只删除表单元素并使用 ajax 调用处理提交。这将使表单交互的处理更加一致，但是您将失去 no-js-enabled 后备功能，但是，鉴于它是由 js 触发的隐藏表单，无论如何这可能不是问题。

无论如何，如果你想用form元素来处理它，你可以添加一个@submit事件处理程序，在处理程序中加上一个e.preventDefault()，以防止条件不匹配时提交表单。请务必在多个浏览器上进行测试，因为 chrome 和 firefox 在处理表单提交功能方面存在一些不一致。

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

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();
    ,
    handleSubmitForm(e) 
      if (this.myData !== "what I want") 
        e.preventDefault();  // prevent form submit
      
    ,
  ,
  data() 
    return 
      myData: null,
      mySignature: null,
    
  

【参考方案3】：

我遇到了同样的问题并找到了以下解决方案：

this.myData = 'dynamically calculated';
this.mySignature = 'creates signature from data';

//force to update form
this.$refs.form.data = this.myData;
this.$refs.form.signature = this.mySignature;

// submit the form with values above
this.$refs.form.submit();

但是，nextTick 方法更好。