CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-component
Yasin Yaqoobi
Yasin Yaqoobi

Reputation: 2050

Vue, how do I pass data to component in render method

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

Upvotes: 8

Views: 5952

Answers (1)

Bert
Bert

Reputation: 82489

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.

Upvotes: 16

Related Questions