我试图清除元素键上的错误对象但没有成功

Question

我的目标是当我使用Vuejs和我的errors javascript类按下HTML元素时，从我的自定义错误对象(如果它在那里的话(中删除错误消息。

如果有错误，我可以从laravel接收错误，这些错误显示在html元素下的span中。然而，当我按下有错误的元素时，消息并没有消失，我不知道为什么。

在我的b-form中，我有：@keydown="errors.clear($event.target.name)我把console.log('message: ' + field);放在我的clear方法中，以进一步解决这个问题，但我得到的是"消息："，后面什么都没有。

代码：

<template>
<div>
<b-form @submit="onSubmit" @reset="onReset" v-if="show" @keydown="errors.clear($event.target.name)">
<b-form-group
id="input-group-1"
label="Email address:"
label-for="input-1"
>
<b-form-input
id="input-1"
v-model="form.email"
type="email"
placeholder="Enter email"
></b-form-input>
<span class="help is-danger" v-if="errors.has('email')" v-text="errors.get('email')"></span>
</b-form-group>
<b-form-group id="input-group-2" label="Your Name:" label-for="input-2">
<b-form-input
id="input-2"
v-model="form.name"
placeholder="Enter name"
></b-form-input>
<span class="help is-danger" v-if="errors.has('name')" v-text="errors.get('name')"></span>
</b-form-group>
<b-button type="submit" variant="primary" :disabled="errors.any()">Submit</b-button>
<b-button type="reset" variant="danger">Reset</b-button>
</b-form>
</div>
</template>
<script>
class Errors {
constructor() {
this.errors = {};
}
has(field) {
return this.errors.hasOwnProperty(field);
}
any() {
return Object.keys(this.errors).length > 0;
}
get(field) {
if (this.errors[field]) {
return this.errors[field][0];
}
}
record(errors) {
return this.errors = errors;
}
clear(field) {
console.log('message: ' + field); //<-- executed with a blank message
delete this.errors['field']; //<-- not sure if this is working as expected
}
}
export default {
components: {
},
data() {
return {
form: {
email: '',
name: '',
},
show: true,
errors: new Errors(),
}
},
methods: {
onSubmit(evt) {
evt.preventDefault()
var self = this
axios.post('/employees', {
name: this.form.name,
email: this.form.email,
})
.then(response => {
evt.target.reset();
// Trick to show form after form reset
self.show = true;
})
.catch(error => {
//self.errors = error.response.data.errors.email[0];
this.errors.record(error.response.data.errors);
console.log(error.response.data.errors);
});
},
onReset(evt) {
evt.preventDefault()
// Reset our form values
this.form.email = ''
this.form.name = ''
// Trick to reset/clear native browser form validation state
this.show = true
},
},
}
</script>

Answer 1

我发现了自己的错误。首先，我需要将name属性添加到我的两个输入中。其次，我从delete this.errors['field']中删除了我的单引号，它应该是this.errors[field]

更新代码：

<template>
<div>
<b-form @submit="onSubmit" @reset="onReset" v-if="show" @keydown="errors.clear($event.target.name)">
<b-form-group
id="input-group-1"
label="Email address:"
label-for="input-1"
>
<b-form-input
id="input-1"
v-model="form.email"
type="email"
placeholder="Enter email"
name="email"
></b-form-input>
<span class="help is-danger" v-if="errors.has('email')" v-text="errors.get('email')"></span>
</b-form-group>
<b-form-group id="input-group-2" label="Your Name:" label-for="input-2">
<b-form-input
id="input-2"
v-model="form.name"
placeholder="Enter name"
name="name"
></b-form-input>
<span class="help is-danger" v-if="errors.has('name')" v-text="errors.get('name')"></span>
</b-form-group>
<b-button type="submit" variant="primary" :disabled="errors.any()">Submit</b-button>
<b-button type="reset" variant="danger">Reset</b-button>
</b-form>
</div>
</template>
<script>
class Errors {
constructor() {
this.errors = {};
}
has(field) {
return this.errors.hasOwnProperty(field);
}
any() {
return Object.keys(this.errors).length > 0;
}
get(field) {
if (this.errors[field]) {
return this.errors[field][0];
}
}
record(errors) {
return this.errors = errors;
}
clear(field) {
console.log('message: ' + field); //<-- executed with a blank message
delete this.errors[field]; //<-- not sure if this is working as expected
}
}
export default {
components: {
},
data() {
return {
form: {
email: '',
name: '',
},
show: true,
errors: new Errors(),
}
},
methods: {
onSubmit(evt) {
evt.preventDefault()
var self = this
axios.post('/employees', {
name: this.form.name,
email: this.form.email,
})
.then(response => {
evt.target.reset();
// Trick to show form after form reset
self.show = true;
})
.catch(error => {
//self.errors = error.response.data.errors.email[0];
this.errors.record(error.response.data.errors);
console.log(error.response.data.errors);
});
},
onReset(evt) {
evt.preventDefault()
// Reset our form values
this.form.email = ''
this.form.name = ''
// Trick to reset/clear native browser form validation state
this.show = true
},
},
}
</script>