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?

CodePudding user response：

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.