Vue js 动态更新集/未设置类

Question

我很少输入提交按钮。有一些验证逻辑，将"has-error"类添加到输入中。如何取消设置此课程的焦点？

模板：

<div class="input-styled badge-icon" :class="{ 'has-error': errors.email}">
<input type="text" @focus="delete errors.email" v-model="email" placeholder="[e-mail]">
</div>
<button @click="submit">Submit</button>

.JS

data() {
return {
errors: {},
email: ''
}
},
methods: {
submit(){
this.errors = {};
if(!this.email){
this.errors.email = 'Something';
}
}
}

我正在尝试删除错误属性，尝试@focus='errors.email="'，但类"has-error"只有在我在输入上键入内容时才消失。 @focus事件有效，我认为我应该调用一些将更新我的 DOM 的函数？

Answer 1

最好将对组件数据的操作移动到函数。您可以通过创建resetValidation函数并将其绑定到输入字段上的焦点事件来实现所需的验证重置。

方法本身应errors字段重置为假值。下面的示例假设表单中有多个输入字段。每个字段都应使用相应的错误字段名称调用resetVlidation方法。如果未提供字段，我们可以重置整个验证：

resetValidation (field) {
if (field) {
this.errors = {
...this.errors,
[field]: ''
}
} else {
this.errors = {}
}

请检查下面的工作示例：

代码沙盒