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

Question

我有一个基本的输入文本字段，想在提交后重置它。重置它时，我目前将其 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: ""
        };
    }
})

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

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