Recientemente refactoricé un código compartido en un mixin en mi aplicación Vue.

El código funciona bien, pero WebStorm muestra todos los métodos como indefinidos donde se usan en la plantilla del componente (aparte de los literales de la plantilla {{ }} ). Por lo tanto, ya no tengo la funcionalidad de Cmd + B para viajar a donde se define la función, lo cual es molesto.

Ver ejemplo aquí:-

 <template v-if="(userIsGuest) && suggestedCars.length > 0"> <div> Suggested cars <div class="suggested-icon">{{ suggestedCars.length }}</div> </div>

En el ejemplo anterior, userIsGuest y suggestedCars son propiedades calculadas. Las propiedades dentro de v-if se muestran como indefinidas en mi editor, pero la misma propiedad dentro de mi plantilla literal {{ suggestedCars.length }} se muestra como definida.

Ambos se definen en mi mixin así: -

 export default { computed: { userIsGuest() { return stuff; }, suggestedCars() { return stuff; }, } }

Cuando agrego this. frente a ambas propiedades indefinidas dentro de mi v-if se muestran como definidas, pero no pensé que necesitaba this. en las plantillas de Vue?

De cualquier manera, ambas formas funcionan, entonces, ¿cuál es la correcta aquí?