将 v-text-field 重置为空文本而不触发“不得为空”规则答案

【问题标题】：reset v-text-field to empty text without triggering a "must not be empty"-rule将 v-text-field 重置为空文本而不触发“不得为空”规则
【发布时间】：2020-07-01 12:04:15
【问题描述】：

我有一个基本的输入文本字段，想在提交后重置它。重置它时，我目前将其 v-model 更新为空字符串。不幸的是，这会触发我的输入规则并呈现错误消息。

代码示例：

<div id="app">
    <v-app>
        <v-text-field v-model="text" :rules="[value => !!value || 'Required']"></v-text-field>
        <v-btn @click="text = ''">submit and reset</v-btn>
    </v-app>
</div>

new Vue({
    el: '#app',
    vuetify: new Vuetify(),
    data() {
        return {
            text: ""
        };
    }
})

有没有一种方法可以在不触发规则的情况下清空该字段？我的意思是它的行为正确，我希望如此，但是当我单击按钮时，我想将该字段重置为其初始状态。

【问题讨论】：

标签： javascript vue.js vuetify.js

【解决方案1】：

如果你把它放在一个表格里，你可以打电话给form.reset()

<v-form
    ref="form"
    >
     <v-text-field v-model="text" :rules="[value => !!value || 'Required']"></v-text-field>
     <v-btn @click="submit">submit and reset</v-btn>
</v-form>

methods : {
  submit () {
     this.$refs.form.reset()
  }
}

文档中使用的示例代码笔：https://codepen.io/ellisdod/pen/jOPpzOO

https://vuetifyjs.com/en/components/forms/

【讨论】：

谢谢。这困扰了我 3 天。