Vue.js component data variable undefined in method

Question

I have something like this as a component:

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>`
                });
            }
        }
     }
  );

The error I get here would be:

TypeError: "this.var2 is undefined" and the source of the error points to func2. What am I doing wrong ?

Daniel F · Accepted Answer · 2020-03-20 21:08:16Z

4

Your this refers to the replace functions context, not vues method context

change it like this

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

So that the context is bound properly. Or alternatively, do this

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

edited Mar 20, 2020 at 21:08

Daniel F

14.3k15 gold badges96 silver badges130 bronze badges

answered Mar 20, 2020 at 20:56

Trevor

2,9811 gold badge37 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Robert C. Holland Over a year ago

Thanks, I'll accept it as answer after the minimum time limit. My application hangs after fixing this line, clearly for some other problem, is there anything obvious that you notice from what I posted that might be causing the problem ?

Trevor Over a year ago

@RobertC.Holland I don't see anything obvious in it. Can you post a fiddle or something of the problem? I would probably have used a computed, not a function for this. Even a custom filter that applies the regex would work

Robert C. Holland Over a year ago

It was related to using method instead of computed, it has been resolved, thank you.

Daniel F · Accepted Answer · 2020-03-20 21:02:30Z

1

You can use ES6's arrow functions, where the this pointer will retain the context of the parent.

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

answered Mar 20, 2020 at 21:02

Daniel F

14.3k15 gold badges96 silver badges130 bronze badges

Collectives™ on Stack Overflow

Vue.js component data variable undefined in method

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related