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

Question

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.

just to be sure, after adding the data: property, did you re compile the assets? npm run dev , or npm run watch? — Cameron
– Cameron, Commented Aug 13, 2020 at 0:36
Yah, I was wondering this too. I actually did not realize that for non-components, data can actually be defined as above too. — Kurt Friars
– Kurt Friars, Commented Aug 13, 2020 at 0:38

Kurt Friars · Accepted Answer · 2020-08-13 00:11:08Z

3

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!';
        };
    }
});

answered Aug 13, 2020 at 0:11

Kurt Friars

3,7742 gold badges18 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bahaeddine · Accepted Answer · 2020-08-13 01:17:12Z

0

You should define data like this :

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

})

answered Aug 13, 2020 at 1:17

Bahaeddine

1191 silver badge6 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related