vue3 如何使用ref引用dom来清除表单上一次值

vue3  arco design  1.问题描述：

第一次输入Madal 弹窗内的Form值

第二次进入发现依然保留上一次值；

解决方案1：

借助ref引用dom 

代码如下：

    <a-modal 
       width="500px"
       v-model:visible="visible"
       @cancel="handleCancel"
       @before-ok="handleBeforeOk"
       okText="Confirm" cancelText="Cancle" 
       draggable	
        >
        <template #title>
        Title
        </template>
        <a-form :model="form"  ref="formRef">
            <a-form-item field="name" label="Email" prop="name" >
                <a-input v-model="form.name" />
            </a-form-item>
            <a-form-item field="post" label="Address" prop="post">
                <a-select v-model="form.post">
                <a-option value="post1">Post1</a-option>
                <a-option value="post2">Post2</a-option>
                </a-select>
            </a-form-item>
        </a-form>
   </a-modal>

　

<script>
import { reactive,ref} from 'vue';

export default {

  setup() {

    const formRef= ref(null);
    const form = reactive(
        {
      name: '',
      post: ''
    });
    const visible = ref(false);
    
    const   handleClick=()=>{
        visible.value = true;
        formRef.value.resetFields()
        }
    
    const handleBeforeOk = (done) => {
      window.setTimeout(() => {
        done()
        
      }, 2000)
    };
    const handleCancel = () => {
      visible.value = false;
    };



    return {
      visible,
      form,
      formRef,
      handleClick,
      handleBeforeOk,
      handleCancel

    }
  },
}
</script>

 

借助：内置API ：  formRef.value.resetFields()  方法解决

 

 

 方法二：

参考form组件：@click = "@click="$refs.formRef.resetFields()"

代码如下：

    <a-form-item>
      <a-space>
        <a-button html-type="submit">Submit</a-button>
        <a-button @click="$refs.formRef.resetFields()">Reset</a-button>
      </a-space>
    </a-form-item>