Vue.js: Property or method is not defined on the instance but referenced during render
Cómo resolver el warning de Vue 'Property or method is not defined on the instance'. Causas y soluciones para Vue 2 y Vue 3.
¿Por qué ocurre?
Vue no puede encontrar una propiedad o método referenciado en el template porque: - La variable no está definida en `data()`, `setup()` o `computed` - Error tipográfico entre el nombre en el template y el nombre en el script - En Vue 3, olvidaste hacer `return` de la variable en `setup()` (Options API de Vue 2 no lo requiere) - Intentas acceder a una prop que no está declarada en `props` - La variable existe en el componente padre pero no se pasó como prop
Solución paso a paso
Vue 2 — Asegúrate de definir en data()
export default {
data() {
return {
// ✅ Definir aquí todas las variables del template
mensaje: 'Hola',
contador: 0,
items: []
}
},
methods: {
// ✅ Definir aquí todos los métodos del template
incrementar() {
this.contador++;
}
}
}
Vue 3 Options API — igual que Vue 2
{{ nombre }}
{{ apellido }}
Vue 3 Composition API — no olvidar el return
Vue 3
Props no declaradas
Cómo evitarlo en el futuro
- Usa `<script setup>` en Vue 3 para eliminar la necesidad de hacer `return` - Activa las Vue DevTools para inspeccionar el estado reactivo en tiempo real - TypeScript con Volar/Vue Official da errores en tiempo de compilación antes de llegar a runtime - Nombra variables y métodos de forma consistente (camelCase)
¿Quieres que una IA te ayude? Genera el prompt perfecto para tu error:
Generador de Prompts