Quasar Vue 框架：重置已验证的输入字段答案

【问题标题】：Quasar Vue Framework: Reset validated input fieldQuasar Vue 框架：重置已验证的输入字段
【发布时间】：2020-10-07 20:17:18
【问题描述】：

我正在开发的 Quasar 应用程序允许拍照并在输入字段中添加一些文本。成功发送图片后，对话框出现并提供 2 个按钮，一个是“Take another piture”（另一个重定向到另一个页面）：

// text input field
<div class="row justify-center q-ma-md">
  <q-input
    v-model="post.caption"
    ref="inputCaption"
    hint="Please enter at least 4 characters."
    :rules="[required(), minLength()]"
    clearable
    label="Caption *"
    dense
    class="col col-sm-6" />
</div>

// Dialog buttons
<q-dialog v-model="savedSuccessfully">
    [...]
    <q-card-actions align="right" class="text-primary">
      <q-btn unelevated rounded color="secondary" label="Take another photo" @click="resetCanvas" />
      <q-btn unelevated rounded color="primary" label="Go to postings" @click="goToPostings" />
    </q-card-actions>

“resetCanvas”功能不仅重置图像画布，还重置输入字段不幸的是resetValidation() - 根据 Quasar 的文档应该可以完成这项工作 - 输入字段仍然被识别为脏：

resetCanvas() {
  [...]

  this.$refs.inputCaption.resetValidation()
  this.$refs.inputCaption.isDirty = false
},

我什至在重置脚本中添加了this.$refs.inputCaption.isDirty = false，但无济于事。（见截图）

如何在重置后正确清除输入字段？

【问题讨论】：

标签： vue.js quasar

【解决方案1】：

就我而言，我使用的是 Vue 3 和 quasar，这是我用来在提交后重置表单的一种方式：

在模板使用中：

<q-form ref="myForm">
  <!-- Your input field -->
</q-form>

在你的脚本标签中：

<script>
import {defineComponent, ref} from "vue"

export default defineComponent({
  setup(){
   const myForm = ref(null)
   
   const onSubmit = () => {
    //Your code....
    myForm.value.reset()
   }
   return{
    myForm,
    onSubmit
   }
  }
})
</script>

【讨论】：

这对我没有用，但我很感激这个答案。我学到了一些切题的东西

【解决方案2】：

唯一对我有用的是在现场使用@blur 并重置为原始数据。

【讨论】：