Как в vue предать this в event [дубликат]

185

29 октября 2018, 16:30

На данный вопрос уже ответили:

Потеря контекста вызова 5 ответов

При загрузке Vue я вызываю метод suggestInit. При создании слушателя suggestView-события select this === Vue. При срабатывании события в коде this == null. Сейчас я использую обращение к экземпляру Vue через объявленную переменную app, но хотелось бы использовать this. Как передать в тело события this?

methods: function() {
    suggestInit: function () {
        // Создаем выпадающую панель с поисковыми подсказками
        new ymaps.SuggestView('address', {results: 5}).events.add('select', function (e) {
            app.device.address = e.get('item').value;
        });
    }
}

Answer 1

Вынесите функцию-обработчик в отдельную переменную и используйте bind

    suggestInit: function () {
        const handler = function (e) {
            // this тут равен экземпляру компонента
            app.device.address = e.get('item').value;
        }
        // Создаем выпадающую панель с поисковыми подсказками
        new ymaps.SuggestView('address', {results: 5})
            .events.add('select', handler.bind(this));
    }

Либо стрелочную ф-цию

    suggestInit: function () {
        // тогда bind не нужен
        const handler = e => {
            // this тут равен экземпляру компонента
            app.device.address = e.get('item').value;
        }
        // Создаем выпадающую панель с поисковыми подсказками
        new ymaps.SuggestView('address', {results: 5})
            .events.add('select', handler);
    }