BonBonSlick
@BonBonSlick
Vanilla Web Architect

Invalid handler for event "click": got undefined?

<template v-for="item in [1,2,3,4]">
                        <div @click="this.toggleMenu"                >
                   test
                </div>
            </template>

[Vue warn]: Invalid handler for event "click": got undefined

found in


Ошибку выдает исключительно в цикле, этот же метод работае как надо вне цикла
<div @click="this.toggleMenu"                >
                   test
                </div>


export default class Menu extends Vue {
    toggleMenu() {
        this.isMenuClosed = !this.isMenuClosed;
    }
};
  • Вопрос задан
  • 81 просмотр
Решения вопроса 1
Aetae
@Aetae
Тлен
А ты сделай так {{this}} и посмотри что у тебя там.
Использование this в шаблонах не предусмотрено, так что не удивительно что не работает.

Твой шаблон превращается компилером примерно в такую render-функцию:
function anonymous() {
  with (this) {
    return _c('div', [
      _l(
          ([1, 2, 3, 4]),
          function (item) {
            return [
              _c(
                  'div',
                  {on: {"click": this.toggleMenu}},
                  [_v("\n                   test\n                ")]
              )
            ]
          }
      )
    ], 2)
  }
}
Как видишь, перебор item происходит внутри другой функции, которая задаёт иной контекст(никакой).
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы