Vue Vuelidate 在提交表单并使数据 属性 为空后显示错误

Question

我正在执行一些基本验证，例如 required,minLength。问题是，当我发出数据插入的网络请求时，它会验证并正常工作，但在网络调用后，当我将文本字段设为空时，它会向我显示一个错误，我该如何忽略验证。这是我的组件代码。提前致谢

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-6">
                <form @submit.prevent="processTaskForm">
                    <div class="card my-3">
                        <div class="card-header">
                            <h3 class="text-center">Add Task in Todo</h3>
                        </div>
                        <div class="card-body">
                            <div class="form-group">
                                <label for="">Task</label>
                                <input type="text" class="form-control" name="task" v-model.trim="$v.task.$model" id="task">
                                <div v-if="$v.task.$error">
                                    <div  v-if="!$v.task.required" class="text-danger">
                                        Field is required
                                    </div>
                                    <div  v-if="!$v.task.minLength" class="text-danger">
                                        Task must be minimun length of 8
                                    </div>
                                </div>
                            </div>
                            <input type="submit" value="Add Task" class="btn btn-primary">
                            <!-- <span v-if="submitStatus === 'ERROR'" class="text-danger ml-3">Please fill all fields correctly</span> -->
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</template>
<script>
    import axios from 'axios'
    import {required,minLength} from 'vuelidate/lib/validators'
        export default {
            name: "Todo",
            data() {
            return {
                task :'',
                submitStatus : 'OK'
            }
        },
        validations: {
            task: {
                required,
                minLength: minLength(8)
            }
        },
        methods:{
            processTaskForm(){
                this.$v.$touch()
                if (this.$v.$invalid) {
                    this.submitStatus = 'ERROR'
                } else {
                    this.submitStatus = 'PENDING'
                    const headers = {
                        "Authorization" : "Bearer "+this.$store.state.user.token
                    }
                    axios.post('/api/add-task', {
                        task: this.task,
                    },{
                        headers:headers
                    })
                    .then((response) => {
                        if(response.data.status){
                            this.task = ""
                            this.submitStatus = 'OK'
                        }
                    }, (error) => {
                        console.log(error);
                    });
                }
            }
        }
    }
</script>

<style>

</style>

Answer 1

清除 task 字段后，您应该调用 this.$v.$reset() 方法，这会将模型及其所有子项的 $dirty 标志设置为 false。