Pass the data from Vue instance to the Vue component

Question

How can I pass the data from the Vue instance to the Vue component? I'm trying to do 'v-for' on a 'li' that resides in my component template, here's the fiddle

HTML

<div id="app">
    <my-notification></my-notification>
</div>

<template id="my-template">
    <ul>
        <li v-for="nn in notifications">{{ nn }}</li>
    </ul>
</template>

Vue script

Vue.component('my-notification',{
    template : '#my-template',
});

new Vue({
    el : '#app',
    data : {
        notifications : ['notification 1','notification 2','notification 3']
    }
});

Unfortunately what have I tried so far (see my fiddle) is not working, any help please?

Possible duplicate of Passing data to components in vue.js

Amin Jafari
– Amin Jafari

2016-10-18 07:35:45 +00:00
Commented Oct 18, 2016 at 7:35 — Amin Jafari
– Amin Jafari, Commented Oct 18, 2016 at 7:35

user443917 · Accepted Answer · 2018-09-30 04:49:05Z

1

You can also consider vuex if your application get bigger

answered Sep 30, 2018 at 4:49

user443917

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

Comments

Juliver Galleto · Accepted Answer · 2016-10-18 07:49:50Z

0

I updated my code

<div id="app">
    <my-notification :notification="notifications"></my-notification>
</div>

<template id="my-template">
    <ul>
        <li v-for="nn in nns">{{ nn }}</li>
    </ul>
</template>

Vue.component('my-notification',{
    template : '#my-template',
    props : ['notification'],
    data : function(){
        return {
            nns : this.notification
        }
    }
});

new Vue({
    el : '#app',
    data : {
        notifications : ['notification 1','notification 2','notification 3']
    }
});

answered Oct 18, 2016 at 7:49

Juliver Galleto

9,09728 gold badges93 silver badges170 bronze badges

Collectives™ on Stack Overflow

Pass the data from Vue instance to the Vue component

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related