current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.7 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 0 down vote favorite
1

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?

share|improve this question
    
Possible duplicate of Passing data to components in vue.js – Amin Jafari Oct 18 '16 at 7:35
up vote 0 down vote accepted

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']
    }
});
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.