I'm working on developing a single-page application and need to transfer data to a child view.
After fetching the API using Axios, I am able to successfully log the data in the console. However, when trying to display the data in the child view, I encounter an error message stating "[Vue warn]: Property or method 'outputs' 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." You can find more information here.
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.
*/
window.Vue = require('vue');
/**
* The following block of code may be used to automatically register your
* Vue components. It will recursively scan this directory for the Vue
* components and automatically register them with their "basename".
*
* Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
*/
// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
import Vue from 'vue';
import VueRouter from 'vue-router';
import routes from './routes';
import '../../node_modules/nprogress/nprogress.css';
const axios = require('axios');
Vue.use(VueRouter);
const app = new Vue({
el: '#app',
data: function() {
return {
outputs: []
}
},
mounted() {
axios.get('/api/output')
.then((response) => {
this.outputs = response.data;
console.log(this.outputs);
})
.catch((err) => {
console.log(err);
});
},
router:new VueRouter(routes),
});
Outputs.vue
<template>
<div><div class="text-grey-darkest font-normal uppercase text-3xl font-bold leading-none mb-3">Outputs</div>
<ul>
<li v-for="(journal_id) in outputs" v-text="journal_id"></li>
</ul>
</div>
</template>
<script>
export default{};
</script>
data structure JSON
Rendering the data in an Li in the child view.