渲染路由器附加的组件中的项目列表

Question

我想列出项目，并在单击项目时显示详细信息。

该脚本如下所示：

const items = [
  {
    id: 1,
  },
  {
    id: 2,
  },
];


const List = Vue.component('list', {
  template: `
    <h1> Total {{items.length}} item(s)</h1>
    <div v-for="item in items" v-bind:id="'cid_'+item.id">
      {{item.id}}
    </div>
  `,
  data() {
    return {
      items,
    };
  },
});

const Detail = {
  template: 'Viewing: {{item.id}}',
};

const routes = [
  {
    path: '/',
    component: List,
  },
  {
    path: '/item/:id',
    component: Detail,
  },
];

const router = new VueRouter({
  mode: 'history',
  routes,
});


let vm = new Vue({
  router,
}).$mount('#page');

当我转到“ /”时，它仅返回“总共2个项目”。项目列表未按预期呈现。

我的代码有什么问题？如何解决？谢谢。

Answer 1

对Vue.js不太熟悉，我不知道您的最终目标是什么，但是当我使用一些CDN链接将其加载到index.html中时，出现一个错误，提示所有组件只能返回一个元素，因此我将其包装在<div></div>中。并在根目录显示项目，这里是fiddle。