Modelesq Modelesq - 4 years ago 153
Javascript Question

Vue.js v-for items won't render

New to Vue js and I'm building my single page app here: fiddle. I'm having trouble with my for loop (I believe).

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

const main = new Vue({
el: '#vue-todos',
components: {
'add-todo': addTodo,
},
template: `
<add-todo></add-todo>
<div>
<ul>
<li v-for="item in items">
{{ item.todo }}
</li>
</ul>
</div>
`,
data: store,
});


The form (
<add-todo></add-todo>
) renders fine. Why aren't the listed items rendering in the vue template?

Answer Source

put the component in a root element, like below:

template: `
        <div>
           <add-todo></add-todo>
            <ul>
                <li v-for="todo in todos">
                    {{ todo.todo }}
                </li>
            </ul>
        </div>
    `,

http://jsfiddle.net/1s5jdc3b/27/

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download