Nuxt Cannot read properties of null (reading '$route')

Question

I'm creating conditional event handlers in this fashion:

<section>@mouseover="this.$route.path === '/' && imgHoverIn"</section>

This, however, throws the error

"Cannot read properties of null (reading '$route')"

I'm able to include the route path as a template literal like this {{this.$route.path }} and get the expected result ('/').

Why is the variable on one hand showing up as expected and on the other hand showing up as null?

Answer 1

You don't need this in template. So try with the following directly

<section @mouseover="$route.path === '/' && imgHoverIn"></section>

Vue is somehow clever and figures out what you're trying to do when you call {{ this.$route.path }}, but it cannot fix the errors for you all the time.

Some ESlint would have told and fixed that for you on the other side.