eddy1992's avatar

Property or method "test" is not defined on the instance but referenced during render....

Hi I am facing an error with vue, I have a Laravel 5.4 project and I installed and performed all the necessary steps to get laravel mix up and running. Now I am trying to perform a simple hello world using vue in my laravel project in app.js I am facing an warning

app.js:32213 [Vue warn]: Property or method "test" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

(found in <Root>)

my app.js


/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

window.Vue = require('vue');

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

Vue.component('example', require('./components/Example.vue'));

const app = new Vue({
    el: 'body',
    data: {
        test: 'hello world'
    }
});

and In the front end whenever I try to call @{{ test }} I am facing this warning and I am frustrated now Please assist.

0 likes
5 replies
Lars-Janssen's avatar

It should be this:

data() {
    return {
        test: 'hello world'
    }
}
eddy1992's avatar

@lars6 thanks for your response but I tried it, It gave me the same error.

bunnypro's avatar

@eddy1992 you should not attach Vue to body, html or any element that contains script. try create an element with an id and attach vue to it

// html
<div id="app">
    {{ test }}
</div>

// sciprt
new Vue({
    el: '#app',

    data: {
        test: 'Hello'
    }
})
1 like

Please or to participate in this conversation.