Почему не видна переменная из второй анонимной функции?

Question

[AL_3]

Привет всем.
Использую vue.js, есть такой кусок кода:

props: ['user'],

        computed: {
            incomingActive: function () {
                let user_name = this.user;
                this.messages.forEach(function (message) {
                    alert('user_name is: ' + user_name);   // <-- обращение к переменной здесь
                  /* ... */
                    return incomingActive;
                });
            }
        },

Хочу обратится к переменной props: ['user'], пишу this.user и user, но вылетают ошибки [Vue warn]: Error in render: "TypeError: this is undefined" и user is not defined, приходится создавать промежуточную переменную user_name. Объясните, пожалуйста, почему так происходит и как избежать создания лишней переменной?
Заранее спасибо.

Comments

[AL_3]

Спасибо за ссылки. Но я хотел бы понять в контексте vue.js: почему props: ['user'] не виден в computed, из второй анонимной функции и как это исправить?

Answer 1

[Александр Аксентьев]

ryanmorr.com/understanding-scope-and-context-in-ja...
https://habrahabr.ru/post/149516/

Answer 2

[Nikita Velko]

В вашем случае вы теряете this, который равен инстансу компонента. Чтоб "не потерять" его, используйте стрелочную функцию.
Из документации:

Стрелочные функции не создают собственный контекст this, а используют значение this окружающего контекста.

computed: {
  incomingActive() {
    this.messages.forEach((message) => {
      alert('user_name is: ' + this.user);
      /* ... */
      return incomingActive;
    });
  },
},

Comments

[AL_3]

Спасибо.