How to solve the "Property or method XXX is not defined on the instance but referenced during render" in Vue.js

One common error during my first steps with Vue was the following, that is logged in the console of your browser:

*vue.js:634 [Vue warn]: Property or method “XXX” is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

(found in Root)*

The reason behind the previous error is that you most probably forgot to define the prop XXX in the data object of your Vue application:

1
2
3
4
5
6
var application = new Vue({
    el: '#app',
    data: {
        // The prop XXX is not defined here, so add it ;)
    }
});

Hope this will save you some minutes of googling!

comments powered by Disqus