Starting out in laravel with vue.js and getting "Property or method is not defined on the instance but referenced during render." error

user_14096219 0
Viewed 408

The result is an empty page after {{greeting }} flashes on the screen. I am new to Vue and just wanted to try it in laravel so I made a simple blade:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>VueJS</title>
    <link rel="stylesheet" href="">

</head>
<body>
<div id="app">
    @{{ greeting }}
</div>

<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>

Then this is js/app.js:

require('./bootstrap');
window.Vue = require('vue');


// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))

Vue.component('example-component', require('./components/ExampleComponent.vue').default);

const app = new Vue({
    el: '#app',
    data: {
        greeting: 'Hello!'
    }
});

To which I only added the greeting in data. When I load the site I get the above mentioned error or in full:

app.js:38298 [Vue warn]: Property or method "greeting" 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://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties. (found in Root)

I have tried removing the "@" before {{ greeting }}, but that gave me the "Use of undefined constant" error. I have also checked out the link provided in the error and do my best to replicate it in app.js like so:

const app = new Vue({
    el: '#app',
    data: {
        greeting: ''
    },
    template: '<div>{{ greeting }}</div>'
});

app.greeting = 'Hello!';

But got the same error as well. I have also checked out some of the solutions but I wasn't able to understand enough of the solutions to apply it to my problem.

laravel vue.js javascript
2 Answers

The issue is that you have not defined the data of your Vue instance correctly. data should be defined as follows:

const app = new Vue({
    el: '#app',
    data() {
        return {
            greeting: 'Hello!';
        };
    }
});
user_19783110

You should define data like this :

const app = new Vue({
el: '#app',
data() {
    return {
        greeting: 'Hello!';
    };
}, 
methods: {
  // methods
}

})

user_123319790
Related