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/

Vue.js v-for项目不会呈现

1 个答案: