Vue. js переменная данных компонента не определена в методе

Question

У меня есть что-то вроде компонента:

Vue.component
(
    'mycomp',
    {
        props : ['c'],
        data : function()
        {
            return { var1 : true, var2 : [] }
        },
        template : `<div v-html='func1(c.id)'></div>`,
        methods :
        {
            func1(id)
            {
                // ...
                return func2(id);
            },
            func2(id)
            {
                var someRegExp = /blah/ig;
                return id.replace(someRegExp, function(capture)
                {
                   //...
                   if(cond) this.var2.push(id);
                   return `<a href='/post/${id}'></a>`
                });
            }
        }
     }
  );

Я получаю здесь ошибку:

TypeError: "this.var2 is undefined" и источник ошибки указывает на func2. Что я делаю не так?

Answer 1

Ваш this относится к контексту функций replace, а не к контексту метода vues

измените его следующим образом

return id.replace(someRegExp, (capture) => {
    //...
    if(cond) this.var2.push(id);
    return `<a href='/post/${id}'></a>`
});

, чтобы контекст был правильно привязан. Или, альтернативно, сделайте это

const self=this;
return id.replace(someRegExp, function (capture) {
    //...
    if(cond) self.var2.push(id);
    return `<a href='/post/${id}'></a>`
});

Answer 2

Вы можете использовать ES6 функции стрелок , где указатель this будет сохранять контекст родителя.

return id.replace(someRegExp, (capture) => {
    //...
    if(cond) this.var2.push(id);
    return `<a href='/post/${id}'></a>`
});