Как вывести данные в таблицу при помощи v-for?

Question

[Алексей]

В данный момент данные выводятся в строку, а должны заполняться согласно созданным для них столбцов, не выходит создать цикл создающий tr

<table style="margin-top: -0.1px;">
      <thead>
        <tr>
          <th>{{WagonModel.number}}</th>
          <th> {{WagonModel.is_problem}}</th>
          <th>{{WagonModel.features}}</th>
          <th>{{WagonModel.volume}}</th>
          <th>{{WagonModel.tare}}</th>
          <th>{{WagonModel.type}}</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td v-for="wagon in WagonsModel" :key="wagon.number">{{wagon.number}}</td>
          <td v-for="wagon in WagonsModel" :key="wagon.number">{{wagon.is_problem}}</td>
          <td v-for="wagon in WagonsModel" :key="wagon.number">{{wagon.features}}</td>
          <td v-for="wagon in WagonsModel" :key="wagon.number">{{wagon.volume}}</td>
          <td v-for="wagon in WagonsModel" :key="wagon.number">{{wagon.tare}}</td>
          <td v-for="wagon in WagonsModel" :key="wagon.number">{{wagon.type}}</td>
       </tr>

       
      </tbody>
    </table>

export default{
    name: 'WagonTable',
    data(){
        return{
            WagonModel:{
                number: 'Номер вагона',
                is_problem : 'Проблемность',
                features : 'Особенности модели вагона',
                volume: 'Объем вагона',
                tare: 'Тара вагона',
                type: 'Тип вагона'
            }
 WagonsModel:[
           { 'number': 1,
            'is_problem': 2,
            'features': 'Пол',
            'volume': 50,
            'tare': 'Контейнер',
            'type': 'Платформа'
            },
            {   'number': 2,
                'is_problem': 31,
                'features': 'ПолУ',
                'volume': 501,
                'tare': 'Крытый вагон',
                'type': 'Платформа2'
            },
            {   'number': 3,
                'is_problem': 31,
                'features': 'ПолУ',
                'volume': 501,
                'tare': 'Полувагон',
                'type': 'Платформа2'
            },
            {   'number': 4,
                'is_problem': 31,
                'features': 'ПолУ',
                'volume': 501,
                'tare': 'Хоппер',
                'type': 'Платформа2'
            }

           ],

Answer 1

[Дмитрий Кузнецов]

Ну так вы и запускаете цикл не правильно. Надо на tr, а вы в td.

Comments

[Алексей]

Да, уже разобрался, спасибо!

Answer 2

[Алексей]

Необходимо преобразовать блок

<tr>
          <th>{{WagonModel.number}}</th>
          <th> {{WagonModel.is_problem}}</th>
          <th>{{WagonModel.features}}</th>
          <th>{{WagonModel.volume}}</th>
          <th>{{WagonModel.tare}}</th>
          <th>{{WagonModel.type}}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="wagon in WagonsModel" :key="wagon.number">
          <td>{{wagon.number}}</td>
          <td>{{wagon.is_problem}}</td>
          <td>{{wagon.features}}</td>
          <td>{{wagon.volume}}</td>
          <td>{{wagon.tare}}</td>
          <td>{{wagon.type}}</td>
       </tr>