Vue js 动态更新 set/unset class

Question

我几乎没有输入提交按钮。有一些将 'has-error' class 添加到输入的验证逻辑。我怎样才能取消这个 class 的焦点？

模板：

<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="" '，但是 class 'has-error' 只有在我输入内容时才会消失。 @focus 事件有效，我认为我应该调用一些函数来更新我的 DOM?

Answer 1

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

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

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

请检查下面的工作示例：

codesandbox

Vue js 动态更新 set/unset class

Vue js dynamic update set/unset class

focus

vue.js