vue.js - Vue | 在插件中定义反应属性

Question

尝试构建我自己的表单验证插件（它是出于学习目的 - 所以我不使用现有的库）。

所以我创建了以下mixin：

export default {
  beforeCreate() {
    if (! this.$vnode || /^(keep-alive|transition|transition-group)$/.test(this.$vnode.tag)) {
      return;
    }

    // create
    this.$validator = new Instance();

    // define computed
    if (! this.$options.computed) {
      this.$options.computed = {};
    }

    this.$options.computed['errors'] = function() {
      return this.$validator.errors;
    };
  }
}

并从组件加载 mixin（因为我不想在任何地方看到这个）：

export default {
    name: "SignIn",
    components: {
      AppLayout,
      TextField,
      HelperText,
      Button
    },
    mixins: [ValidateMixin]
  }

无论如何，任何时候输入发生变化 - 有一个事件可以测试值并控制我的错误包：

export default class {

  constructor() {
    this.items = {};
  }

  first(name) {
    if (name in this.items) {
      return this.items[name][0];
    }

    return false;
  }

  add(name, errors) {
    this.items[name] = errors;
  }

  remove(name) {
    delete this.items[name];
  }

  has(name) {
    return name in this.items;
  }

  all() {
    return this.items;
  }

}

我已经绑定:invalid="errors.has('email')"了HTML 元素（false无论我在做什么，无效的属性仍然存在。

我确实明白，为了创建反应性属性，我必须使用 getter/setter 来处理这个问题，但我有点坚持。