Почему не обновляются данные?

Question

[Дмитрий]

Здравствуйте.

Создаю компонент с select2(основа взята отсюда ). Он должен показывать ошибки, если таковые будут после сохранения формы, и удалять их, если выбирается элемент из списка.
Вот код:

<template>
    <div class="form-group" :class="{ 'has-error' : model.errors.has(name) }">
        <label v-text="label"></label>
        <select class="form-control">
            <slot></slot>
        </select>
        <span class="help-block" v-if="model.errors.has(name)" v-text="model.errors.get(name)"></span>
    </div>
</template>

<script>
    export  default {
        name: 'm-select2',
        props: {
            model: Object,
            name: String,
            options: Array,
            value: {},
            label: String,
            textKey: String,
            minimumResultsForSearch: String,
            placeholder: String,
        },
        mounted() {
            let vm = this;

            if (this.textKey !== undefined) {
                Object.keys(this.options).forEach(key => {
                    this.options[key].text = this.options[key][this.textKey];
                })
            }

            $('select', this.$el)
            // init select2
                    .select2({data: this.options, placeholder: this.placeholder, minimumResultsForSearch: this.minimumResultsForSearch})
                    .val(this.value)
                    .trigger('change')
                    // emit event on change.
                    .on('change', function () {
                        vm.$emit('input', this.value)
                    })
        },
        watch: {
            value(value) {
                $('select', this.$el).val(value).trigger('change');
                this.model.errors.clear(this.name);
            },
            options(options) {
                let vm = this;

                if (this.textKey !== undefined) {
                    Object.keys(options).forEach(key => {
                        options[key].text = options[key][this.textKey];
                    })
                }
                // update options

                $('select', this.$el).find('option:not(:disabled)').remove();
                $('select', this.$el).select2({data: options, placeholder: this.placeholder, minimumResultsForSearch: this.minimumResultsForSearch})
                        .val(this.value)
                        .trigger('change')
                        // emit event on change.
                        .on('change', function () {
                            vm.$emit('input', this.value)
                        })
            }
        },
        destroyed() {
            $('select', this.$el).off().select2('destroy')
        }
    }
</script>

событие @input, которое висит на теге select почему то не срабатывает, поэтому пришлось удалять ошибку в методе watch(эта строка: this.model.errors.clear(this.name);).
Ошибка удаляется, но класс hasError все равно остается, так же как и строка с ошибкой

<span class="help-block" v-if="model.errors.has(name)" v-text="model.errors.get(name)"></span>

Спасибо!

PS: Такое же поведение у Checkbox и Radio. C компонентами Input, DatePicker, все ок

Answer 1

[Алексей Черемисин]

Попробуйте переделать с
vm.$emit('input', this.value) на vm.$emit('input', vm.value)
Похоже, тут this.value ссылается совсем не на контекст vuejs, а на контекст jquery. Ну и как-то нехорошо смешивать JQ и Vue. Я вообще не понимаю зачем тут нужен JQ.