Vue компоненты внутри цикла

Question

Vue компоненты внутри цикла

1

Я думаю, этот вопрос немного глупый, но я, честно говоря, не смог разобраться сам.

Моя проблема заключается в том, когда я пытаюсь отобразить кучу компонентов, используя

…
<tbody v-for="body in bodies">
    <row-c v-for="row in body.rows">
…

bodies

bodies: [
    {
        someOther: 'smth',
        rows: [
            {title: 'b1r1'},
            {title: 'b1r2'},
            {title: 'b1r3'}
        ]
    },
    {
        someOther: 'smthElse',
        rows: [
            {title: 'b2r1'},
            {title: 'b2r2'},
            {title: 'b2r3'}
        ]
    }
]

Я получаю ошибку

[Vue warn]: Error in render: 'TypeError: body is undefined'

Пример CodePen с ошибкой

Но без компонента он работает: пример CodePen без ошибок.

Разумеется, я прочитал документы, указанные в сообщении об ошибке, но не понимаю, как мне изменить свой код. Дайте мне совет, пожалуйста :)

Заранее спасибо.

UPD

Я только что обновил первый codepen в соответствии с ответом Джованэ, и в нем больше нет ошибок.

Storm 13 окт. 2018, в 15:34

Источник

0

Можете ли вы добавить некоторый контекст относительно того, как выглядят bodies ?
tyskr 13 окт. 2018, в 13:27

Теги:

javascript

vuejs2

vue-component

1 ответ

Ещё вопросы

Можете ли вы добавить некоторый контекст относительно того, как выглядят bodies ?

Giovane · Accepted Answer · 2018-10-13T11-37-00.000Z

Ну, поскольку вы работаете с шаблоном DOM, вы должны взглянуть на DOM-шаблон Parsing Caveats

Для того, чтобы ваш пример работы вы должны использовать атрибут is в <tr>:

<tbody v-for="body in bodies">
  <tr is="row-c" v-for="row in body.rows" v-bind:row="row"></tr>
</tbody>

И добавьте прокрутку row в row-c:

Vue.component('row-c', {
  props: ['row'],
  data: function() {
    return {
      body: ''
    }
  },
  template: "#row-c-template"
});