During my journey of learning Laravel and Vue.js, I encountered a challenging issue that has proven to be quite perplexing. Despite delving into the depths of Laravel and Vue.js documentation, as well as scouring the internet for solutions, I remain unable to resolve this particular problem.
The predicament revolves around a blade.php file where I have implemented a vue-template named Articles.Vue, intending for it to appear nestled between two specific tags.
The source of trouble lies in the rendering process. Within my app.js file, I am requiring Articles.vue as follows:
require('./bootstrap');
window.Vue = require('vue');
Vue.component('articles',
require('./components/Articles.vue').default
);
var display = () => {
axios.get('http://localhost/project/public/pizzas/0').then(resp => {
return JSON.stringify(resp.data);
});
};
const app = new Vue({
el: '#app',
data: display
});
This Articles.vue file appears structured like so:
<template>
<div>
<div>This should be populated by axios...
{{ display() }}
</div>
</div>
</template>
However, despite my intentions for utilizing the display() method for an ajax call, it remains unidentified during the rendering process:
[Vue warn]: Property or method "display" is not defined on the instance but referenced during render. Ensure that this property is reactive, either within the data option, or for class-based components, through proper initialization of the property.
My initial approach was to define the display() method within app.js and incorporate it into the data section of Vue, yet my efforts proved futile. Where exactly did I go wrong?