Vue | определить реактивные свойства в плагине - PullRequest
Новая
       18

Vue | определить реактивные свойства в плагине

0 голосов
/ 27 января 2019

Пытаюсь создать свой собственный плагин для проверки формы (это для целей обучения - поэтому я не использую существующие библиотеки).

Итак, я создал следующий миксин: 

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

Изагрузил миксин из компонента (потому что я не хочу видеть это нигде): 

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 независимо от того, что я делаю.

Я понимаю, что для создания реактивного свойства я должен справиться с этим с помощью методов получения / установки, но я немного застрялс этим.

...