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

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 不是很熟悉，我不知道你的最终目标是什么，但是当我在 index.html 中加载它时使用一些 CDN 链接时，我收到一条错误消息，指出所有组件都必须只返回一个元素，因此我将其包装在 <div></div> 中.它显示根目录下的项目，这里是 fiddle .