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;
  }

}

我已经绑定了HTML元素（:invalid="errors.has('email')"），并且使用devtools可以看到错误包的变化-但是绑定是行不通的。无论我在做什么，无效的属性都为false。

我确实知道，为了创建反应性属性，我必须使用getters / setter方法来处理此问题，但是我对此有些犹豫。

Vue |在插件中定义反应性

0 个答案: