How to use/import data in App.vue from constructor

Question

I'm initializing my app with main.js like so,

import App from './App.vue';

const store = {
    items: [{
        todo: 'Clean Apartment.',
    },{
        todo: 'Mow the lawn!',
    },{
        todo: 'Pick up eggs, milk & flour',
    }, {
        todo: 'Watch the big game',
    }],
};

const app = new Vue({
    el: '#app-zone',
    data: store, // is this not sending the store data into App.vue?
    render: h => h(App),
});

I'm trying to make use of items within App.vue. But I'm not sure how or if it's passed down into it.

App.vue looks like so...

export default {
    props['items'], // not sure if that's correct
    created() {
        console.log(this.items);  // always returns undefined
    }
}

So how do I get data from the constructor and make use of it? Thank you for your help!

tony19 · Accepted Answer · 2022-07-15 01:03:40Z

1

In order to pass props via the render function, you need to provide a context object. See https://v2.vuejs.org/v2/guide/render-function.html#createElement-Arguments

render: h => h(App, {
  props: {
    items: store.items
  }
})

edited Jul 15, 2022 at 1:03

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Feb 20, 2017 at 23:48

Phil

166k25 gold badges265 silver badges269 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to use/import data in App.vue from constructor

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related