VueJS. Как создать реактивный класс?

Question

[Сергей Семенко]

class MessageBag {
    set (errors) {
        // Нужно при вызове этого метода сообщать об изменениях в компонент
        this.errors = errors;
    }
    has (key) {
        return this.errors.hasOwnProperty(key)
    }
}

class Validator {
    constructor (component) {
        this.errors = new MessageBag;
        this.component = component;
        this.update();
    }
    handle (errors) {
        this.errors.set(errors);
    }
    update () {
        this.errors.set({ /* Empty object */ });
    }
}

module.exports = (component) => {
    return new Validator(component);
}

В компоненте:

created () {
            this.$validator = require('../../validator')(this);
        },

<div :class="[{ 'has-error': $validator.errors.has('title') }, 'form-group']">
                            <label class="control-label" for="title">Заголовок</label>
                            <input id="title" name="title" type="text"
                                   class="form-control" v-model="form.title">
                        </div>

Как такое можно реализовать?

Comments

[Николай Антонов]

В каком смисле 'реактивний'? Динамический? И какую версию используете? Во 2 props уже не динамические

[Сергей Семенко]

Николай Антонов: да, динамичный. Использую 2-ю версию.

[Николай Антонов]

Сергей Семенко: переключение класса сделать просто, можете сделать пустое свойство в data, и в created значение из пропс поставить туда. Во 2 версии реактивность не такая реактивная

Answer 1

[Николай Антонов]

Для валидации советую использовать vue validator

Comments

[Сергей Семенко]

Он не подходит, валидация происходит на сервер + хочу сам написать.