`Это` не определено в наблюдателе vue.js

avatar
Jackson J
15 февраля 2017 в 07:05
21127
1
48

У меня есть компонент с наблюдателем

props: {
    propShow: { required: true, type: Boolean }
},

data() {
    return {
        show: this.propShow
    }
},

watch: {
    propShow: {
        handler: (val, oldVal) => {
            this.show = val;
        }
    }
}

Всякий раз, когда компонент parent изменяет propShow, этот компонент должен обновлять свое свойство show. Компонент This также изменяет свойство show, поэтому мне нужны оба: show и propShow, потому что Vue.js не позволяет изменять свойства напрямую.

Эта строка

this.show = val;

вызывает ошибку

TypeError: Cannot set property 'show' of undefined

потому что this внутри обработчика undefined.

Почему?

Источник

Ответы (1)

avatar
Saurabh
15 февраля 2017 в 07:11
94

Здесь вам придется использовать синтаксис function, как указано в документации здесь:

Обратите внимание, что для определения наблюдателя не следует использовать функцию стрелки (например, searchQuery: newValue => this.updateAutocomplete(newValue)). Причина в том, что стрелочные функции связывают родительский контекст, поэтому это не будет экземпляр Vue, как вы ожидаете, и this.updateAutocomplete будет неопределенным.

Таким образом, ваш код должен быть:

watch: {
    propShow: {
        handler: function(val, oldVal) {
            this.show = val;
        }
    }
}
Rutwick Gangurde
13 июля 2020 в 08:50
0

Спасибо! Любая идея, как написать сеттер для единственного числа, не производного от других свойств, вычисляемого свойства?

Dmitry Polushkin
15 марта 2021 в 10:23
0

ключевое слово объекта handler может быть удалено.