Вызвать метод в другом методе Vue JS

Question

Изучаю Vue JS и появился вопрос, как вызвать метод в другом методе? Обычный вызов функции не работает, попробовал через this.название функции, тоже самое, как можно решить эту проблему? Функция mMenu вызывается при клике на кнопку, вот ошибка: Error in v-on handler: "TypeError: this.toggleScroll is not a function"

<header class="header">
    <div class="header__wrapper header__container">
        <div @click="mMenu" class="m-menu"><div class="m-menu__burger"></div></div>
    </div>
</header>

let app = new Vue ({
    el: '#app',
    data: {
        body: document.querySelector('body'),
    },
    methods: {
        toggleScroll: () => {
            body.classList.toggle('no-scroll');
        },
        mMenu: (e) => {
            const target = e.target;
            if(target.closest('.m-menu').classList.contains('active')) {
                this.toggleScroll(); // ????????
            } else {k';
                this.toggleScroll(); // ????????
            }
        },
    },
});

Answer 1

Из документации (https://ru.vuejs.org/v2/api/#methods):

Не используйте стрелочные функции при определении методов (например, plus: () => this.a++). Стрелочные функции связываются с родительским контекстом, поэтому this будет указывать не на экземпляр Vue, и this.a окажется неопределённым.

Переделайте ваши функции в обычные, и сможете обращаться к методам внутри вашего компонента, то есть:

methods: {
  firstMethod() {
    console.log('firstMethod');
  },
  secondMetho() {
    this.firstMethod();
    console.log('secondMethod'):
  },
},

БЛОГ НА HUSL

Вызвать метод в другом методе Vue JS

Ответы (1 шт):