Vue This Undefined

Posted on  by admin

Modified1 month ago. I have component with watcher. Whenever parent component changes propShow this component must update it's show property. This component also modifies show property, that's why I need both: show and propShow, because Vue.js does not allow to change properties directly.

because this inside handler is undefined. 33 gold badges1414 silver badges3131 bronze badges. 3131 bronze badges. You will have to use function syntax here, as warned in the docs here:.

Note that you should not use an arrow function to define a watcher (e.g. searchQuery: newValue => this.updateAutocomplete(newValue)).

The reason is arrow functions bind the parent context, so this will not be the Vue instance as you expect and this.updateAutocomplete will be undefined.

So your code should be:.

3636 gold badges175175 silver badges230230 bronze badges. 230230 bronze badges. "function" is not es6 code, you should better write:. Modified2 years, 8 months ago. I just wanna use Vue computed, but I get undefined(styleObj.width), and it seems that the computed function was not called (didn't log 'computed').

And when I changed data while the computed function was still not be called and the data (styleObj.width) was still undefined.

The code is simple and I hope you know what I'm talking about.

I have 2 questions:. Why the calcWidth function never be called? I think it will be called twice, at the beginning and in 2 sec, but it never be called. Why the styleObj.width has always been undefined?

2626 bronze badges. 48211 gold badge66 silver badges1414 bronze badges. 66 silver badges1414 bronze badges. There are several problems.

The way it's written currently, the this in width:this.calcWidth will not be referring to the correct object. It needs to be within a function to get the scoping correct. That is easily fixed by changing data to a function. The next problem is that computed properties are not available within the data function. The order is roughly:. Things lower down that list can use things higher up the list, not the other way around. Instead you can make the whole style object a computed property:.

or if you prefer to retain calcWidth:.

33 gold badges3333 silver badges5353 bronze badges. 5353 bronze badges. You can't use computed property in data, because data evaluates before the computed properties did. You can use a watcher to achieve the intended result:.

If num changes the watcher get triggered.See the documentation on that.

Edit:You can use the argument immediate to trigger directly:.

You're happily coding along, loving how awesome Vue is, when it strikes.

Your VueJS app doesn't work, and you get an error that says:. Don't worry, you're not alone — I've run into this issue countless times, and I'll show you just how to solve it.

The likely cause of this is that you're mixing up your usage of regular functions and arrow functions. My guess is that you're using an arrow function. If you replace the arrow function with a regular function it will probably fix the issue for you.

But let's go a little further and try to understand why this works. After all, knowledge is power, and if you know what caused your problem, you'll be able to avoid a lot of frustration and wasted time in the future.

There are also a few other places where you can get tripped up with this error:. Fetching data using fetch or axios. Using libraries like lodash or underscore. I'll cover these as well, and how to do them properly. In Javascript we get two different kinds of functions.

They operate in almost identical ways, except they differ in how they treat the variable this. This causes a ton of confusion for new and old Javascript devs alike — but by the time we're through you won't be caught by this one anymore. A regular function can be defined in a few different ways. The first way is less common in Vue components, because it's a bit longer to write out:.

The second way is the shorthand function, which is probably more familiar to you:. In a regular function like this one, this will refer to the "owner" of the function. Since we're defining it on the Vue component, thisrefers to your Vue component.

I'll explain how this scoping works in more detail later on. In most cases you should use a regular function with Vue, especially when creating:.

What is lexical scoping?

While regular functions are usually what you need, arrow functions come in very handy as well. Arrow functions can be even shorter and quicker to write, and have gained lots of popularity recently because of this.

However, they aren't too different when defining a method on an object like we are doing when writing Vue components.

This is what they look like on a Vue component:.

Anonymous Functions

The real differences start to come in to play when dealing with how this works. In an arrow function, thisdoes not refer to the owner of the function. An arrow function uses what is called lexical scoping. We'll get into this more in a bit, but it basically means that the arrow function takes this from it's context. If you try to access this from inside of an arrow function that's on a Vue component, you'll get an error because this doesn't exist!

So in short, try to avoid using arrow functions on Vue components.

It will save you a lot of headaches and confusion. There are times when it's nice to use a short arrow function.

But this only works if you aren't referencing this:.