Question

我的提交按钮输入很少。有一些验证逻辑可以在输入中添加“具有错误”类。我该如何取消对课程的关注？

模板：

<div class="input-styled badge-icon" :class="{ 'has-error': errors.email}">
    <input type="text" @focus="delete errors.email" v-model="email" placeholder="example@gmail.com">
</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 = {}
  }

请检查以下工作示例：

codesandbox

Vue JS动态更新设置/取消设置类

1 个答案: