类星体Vue框架:重置验证输入字段

Question

我正在开发的类星体应用程序允许在输入字段中拍照和添加一些文本。成功发送图像后，对话框将出现，并提供2个按钮，一个按钮“另一个陷阱”(另一个重定向到另一个页面)：

// 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()上重新设置输入字段--根据类星体的文档，输入字段应该完成--输入字段仍然被认为是脏的：

resetCanvas() {
  [...]

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

我甚至在重置脚本中添加了一个this.$refs.inputCaption.isDirty = false，但是没有效果。(见截图)

​

​

在重置时，我需要做些什么才能正确清除输入字段？

Answer 1

对于我而言，我使用的是Vue 3和类星体，这是我在提交后重置表单的一种方式：

在模板使用中：

<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>

​

Answer 2

唯一对我有用的是在字段上使用@blur并重新设置原始数据。