'Vue mixin properties in template showing as undefined in WebStorm IDE?
I've recently refactored some shared code into a mixin in my Vue application.
The code works fine, but WebStorm is showing all the methods as undefined where they're used in the component template (aside from in template literals {{ }}). I therefore no longer have the functionality to Cmd + B to travel to where the function is defined which is annoying.
See example here:-
<template v-if="(userIsGuest) && suggestedCars.length > 0">
<div>
Suggested cars
<div class="suggested-icon">{{ suggestedCars.length }}</div>
</div>
In the example above, userIsGuest and suggestedCars are both computed properties. The properties inside the v-if are both showing as undefined in my editor, but the same property inside my template literal {{ suggestedCars.length }} shows as defined.
Both are defined in my mixin like so:-
export default {
computed: {
userIsGuest() {
return stuff;
},
suggestedCars() {
return stuff;
},
}
}
When I add this. infront of both undefined properties inside my v-if they show as defined, but I didn't think I needed this. in Vue templates?
Either way - both ways work, so which is correct here?
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
