Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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)
});
like image 731
Yasin Yaqoobi Avatar asked Jun 08 '17 04:06

Yasin Yaqoobi


People also ask

How do I pass my value to component Vue?

Using Props To Share Data From Parent To Child # VueJS props are the simplest way to share data between components. Props are custom attributes that we can give to a component. Then, in our template, we can give those attributes values and — BAM — we're passing data from a parent to a child component!

How do I transfer data to child component Vue?

The way it works is that you define your data on the parent component and give it a value, then you go to the child component that needs that data and pass the value to a prop attribute so the data becomes a property in the child component. You can use the root component (App.

How do I force render a component in Vue?

The best way to force Vue to re-render a component is to set a :key on the component. When you need the component to be re-rendered, you just change the value of the key and Vue will re-render the component.


1 Answers

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.

like image 114
Bert Avatar answered Oct 20 '22 04:10

Bert