Vue компоненты внутри цикла - PullRequest
Новая
       12

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

0 голосов
/ 13 октября 2018

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

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

…
<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

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

1 Ответ

0 голосов
/ 13 октября 2018

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

Чтобы ваш пример работал, вы должны использовать атрибут 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"
});
...