类星体Vue框架：重置已验证的输入字段

iyr7buue 于 2023-02-05 发布在 Vue.js

关注(0)|答案(3)|浏览(149)

我正在开发的Quasar应用程序允许拍照并在输入框中添加一些文本。成功发送图像后，对话框出现并提供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()上-根据Quasar的文档，它应该完成这项工作-输入字段仍然被识别为脏：

resetCanvas() {
  [...]

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

我甚至在重置脚本中添加了一个this.$refs.inputCaption.isDirty = false，但是没有用。

我必须做什么才能在重置时正确清除输入字段？

vue.js

来源：https://stackoverflow.com/questions/64251703/quasar-vue-framework-reset-validated-input-field

3条答案

按热度按时间

yvt65v4c1#

对于我这边，我使用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>

赞(0）回复(0）举报 2023-02-05

mrwjdhj32#

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

赞(0）回复(0）举报 2023-02-05

at0kjp5o3#

根据文档，要在单击单独函数中的按钮时验证类星体形式，您应该：
1.在要验证的组件中，设置lazy-rules='ondemand'，以便它等待验证函数触发，并设置ref="myForm"，以便验证函数知道您正在验证的表单
1.将@submit="validate"事件处理程序附加到窗体
1.创建验证函数

setup () {
  const myForm = ref(null)

  function validate () {
    myForm.value.validate().then(success => {
      if (success) {
        // yay, models are correct
      }
      else {
        // oh no, user has filled in
        // at least one invalid value
      }
    })
  }

  // to reset validations:
  function reset () {
    myForm.value.resetValidation()
  }

  return {
    myForm,
    // ...
  }
}

赞(0）回复(0）举报 2023-02-05

我来回答

类星体Vue框架：重置已验证的输入字段

3条答案

相关问题

热门标签

最新问答