uni-app 提交完表单，自动重置表单

页面有一个表单和一个提交按钮（没有重置按钮），希望表单提交后自动重置表单。

想了两个办法，记录一下：

1. 表单里使用 v-model 绑定数据，提交完表单后，把绑定的数据重置
2. 表单里有个隐藏的重置按钮，提交完表单后，触发重置按钮的点击。

提交后清空 v-model 绑定的数据

这里用到了 v-model 来进行数据双向绑定

<template>
  <view class="content">
    <form ref="form1" @submit="formSubmit">
      <input class="uni-input" name="input1" v-model="input1" placeholder="这是一个输入框" />
      <button form-type="submit">Submit</button>
    </form>
    
  </view>
</template>

<script setup>
  import { ref } from 'vue'
  const form1 = ref(null)
  const input1 = ref('')

  const formSubmit = (e) => {
    console.log('submit', e.detail.value)
    // 假设这个 setTimeout 是一个异步 AJAX 请求
    setTimeout(() => {
      // 提交完成后，重置表单项的数据
      input1.value = ''
    }, 1000)
  }
</script>

提交后点击隐藏的重置按钮

注意：这种方法仅在 H5 生效，微信小程序、App 里仍然不行

这个方案最麻烦的是，如何触发重置按钮的点击。

不过 Vue 3 提供了 模板引用 能力，通过 ref 可以拿到 DOM 对象引用，于是在表单的提交事件处理函数中，可以通过 refObj.value.$el 拿到具体的 DOM 对象，试了一下，还真的可以

那么 refObj.value.$el.click() 自然能模拟触发重置按钮的点击行为了。

<template>
  <view class="content">
    <form @submit="formSubmit">
      <input class="uni-input" name="input" placeholder="这是一个输入框" />
      <button form-type="submit">Submit</button>
      <button class="reset-button" ref="resetButton" form-type="reset">Reset</button>
    </form>
    
  </view>
</template>

<script setup>
  import {ref} from 'vue'
  const resetButton = ref(null)
  const formSubmit = (e) => {
    // 假设这个 setTimeout 是一个异步 AJAX 请求
    setTimeout(() => {
      // 提交完成后，重置表单项的数据
      resetButton.value.$el.click()
    }, 1000)
  }
</script>

<style>
  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: azure;
  }

  .uni-input {
    display: flex;
    justify-content: center;
    border: 1rpx solid #888;
    margin: 20rpx;
  }

  .reset-button {
    display: none;
  }
</style>

总结

uni-app 并没有给表单组件提供类似 resetForm 的 API，只能通过这两种方法实现，如果有其他方法，欢迎其一探讨