Vue.js v-for 項目不會呈現

Question

Vue js 新手，我正在這里構建我的單頁應用程序： fiddle 。 我的 for 循環有問題（我相信）。

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,
});

表單 ( <add-todo></add-todo> ) 呈現良好。 為什么列出的項目沒有在 vue 模板中呈現？

Answer 1

將組件放在根元素中，如下所示：

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

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