Javascript 更改输入字段时删除验证错误

我不熟悉使用Vue，不知道如何在输入字段值更改时从其关联的输入字段中删除验证错误。我将输入字段值存储在名为

fields

的对象中

data（）

内，如下所示（小片段）：

我还将验证错误存储在名为

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."]

removeValidationError : function(errorField){

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

},

要在输入下显示验证错误，我执行以下操作：

我的一个输入示例是（我使用Laravel blade插入字段的“name”），带有

{{$name}

：

removeValidationError（）

方法是从

errors

对象中删除特定验证错误的方法，但该方法不起作用。我的

removevalidateError

方法如下：

{"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."]

removeValidationError : function(errorField){

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

},

正如您所见，我尝试了清空字段和删除字段，但没有效果。我甚至没有在控制台中收到任何错误消息，但是当I console.log

errorField

显示错误消息时

（其他信息，我使用Laravel获得验证）

---

最好的方法是什么？谢谢

在模板中进行的数据绑定存在问题，无法使用模板中的

错误来计算
对象的值。{{$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="">


对不起，我应该提到我使用Laravel blade将字段的名称插入DOM，因为输入是一个Laravel组件（这使我更容易管理输入），所以
错误。{$name}
工作正常，例如，它会以
错误的形式输出。实际上，您应该在前端和后端进行验证。我推荐一个包，比如Parsley.js。这样，您就不必担心删除laravel的验证，因为它在到达那里之前应该已经有效了。然后，laravel验证更像是一种备份，以防有人试图修改DOM或出现问题。