javascript - 删除输入字段更改时的验证错误

Question

我是 Vue 的新手，想知道如何在输入字段值发生变化时从关联的输入字段中删除验证错误。我将输入字段值存储在名为 fields 的对象中里面data()如下(小片段):

 fields: {
  email_type: '',
  date_of_birth: '',
  country_of_birth: '',
}

我还将验证错误存储在名为 errors 的对象中。

当用户提交表单并收到验证错误时，错误对象将被填充。示例如下:

{"email_type":["The email type field is required."],
"date_of_birth":["The date of birth field is required."],
"country_of_birth":["The country of birth field is required."]

要在输入下显示验证错误，我这样做:

<small class="font-weight-bold help text-danger" v-if="errors.{{$name}}" v-text="errors.{{$name}}[0]"></small>

我的输入示例是(我使用 Laravel Blade 插入字段的“名称”) {{$name}} :

<input @change="removeValidationError(errors.{{$name}})" v-model="fields.{{$name}}" class="form-control" value="">

removeValidationError()方法应该从 errors 中删除特定的验证错误。对象但是这不起作用。我的removeValidationError方法如下:

removeValidationError : function(errorField){

    if(errorField !== undefined){
        console.log(errorField);
        errorField = "";
        delete errorField;
    }

},

正如您所看到的，我尝试了清空该字段并删除它，但这没有效果。但是，当我 console.log errorField 时，我什至没有在控制台中收到任何错误消息。它确实显示错误消息。

(其他信息，我使用 Laravel 进行验证)

最好的方法是什么？谢谢

Answer 1

模板中完成的数据绑定(bind)存在问题，无法使用错误评估对象的值。{{$name}}模板。它不会编译，理想情况下应该抛出错误。正确的解决方案是使用尖括号访问属性 - errors[$index]

而不是

<small class="font-weight-bold help text-danger" v-if="errors.{{$name}}" v-text="errors.{{$name}}[0]"></small>

<input @change="removeValidationError(errors.{{$name}})" v-model="fields.{{$name}}" class="form-control" value="">

应该是

<small class="font-weight-bold help text-danger" v-if="errors[$name]" v-text="errors[$name][0]"></small>

<input @change="removeValidationError(errors[$name])" v-model="fields[$name]" class="form-control" value="">