This is the main vue component. I want to make an ajax request and pass the data using the render method to my app component, which is a standalone component in a different file. How do I pass this data and how can I retrieve it in my app component. I am learning Vue, I know how to do this with <template></template>
but would like to know if it is possible to do it this way.
new Vue({ el: '#app', data: { data: {} }, mounted() { axios.get("http://stag.cyberserge.com:4000/autos").then(res => this.data = res.data) }, render: h => h(App, this.data) });
Advertisement
Answer
Pass it as a property.
render(h){ return h(App, {props: {appData: this.data}}) },
See the documentation here.
In your App component, add appData (or whatever you want to call it) as a property.
export default { props: ["appData"], ... }
Here is an example of this working.