Визуализация списка элементов в компоненте, подключенном маршрутизатором - PullRequest
Новая
       7

Визуализация списка элементов в компоненте, подключенном маршрутизатором

0 голосов
/ 06 июля 2018

Я хотел бы перечислить элементы и отобразить детали при нажатии на элемент.

Сценарий выглядит следующим образом: 

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 элементов". Список элементов не отображается должным образом.

enter image description here

Что не так с моим кодом? Как это исправить? Спасибо.

1 Ответ

0 голосов
/ 06 июля 2018

не очень знаком с Vue.js, и я не знаю, какова ваша конечная цель здесь, но когда я загрузил это в index.html с некоторыми ссылками CDN, я получил ошибку, в которой говорилось, что все компоненты должны возвращать только один элемент, так Я завернул его в <div></div>. и это показывает элементы в корне, вот скрипка .

...