如何用Vue打印表中正确的行数

Question

我刚刚开始学习Vue，在打印一个表应该得到的正确行数时遇到了一些小问题。

我的表有2列和4个预期行。当我测试我的代码时，我得到了一个包含2列和一行的表，其中包含4个列值；或者，我得到了一个包含2列和4行的表，其中包含相同的信息以及4行中的4列值。

基本上就是尝试制作一个像这样的表

       Col 1    |   Col2
row1   rData    |   rData
row2   rData    |   rData
row3   rData    |   rData
row4   rData    |   rData

这个html

                      <table>
                          <thead id="tblHead">
                              <th v-for="item in items">
                                  {{ item.message }}
                              </th>
                          </tr>
                      </thead>
                      <tbody id="tblInside">
                        <!--  <tr v-for="stuff in stuffs">
                              {{ stuff.message }}-->
                            <tr v-repeat="stuffsTD">
                              <td v-for="tdStuff in stuffsTD">
                                  {{ tdStuff.message }}
                              </td>
                          </tr>
                      </tbody>
                      </table>

The Vue.js

var tbl = new Vue({
    el: '#tblHead',
    data: {
        items: [
            { message: 'One' },
            { message: 'Two'}
        ]
    }
})

var inTbl = new Vue({
    el: '#tblInside',
    data: {
        stuffsTD: [
            { message: 'Row1 Col1 Plz' },
            { message: 'Row1 Col2 Plz' },
            { message: 'Row2 Col1 Plz' },
            { message: 'Row2 Col2 Plz' }
        ]
    }
})

Answer 1

试试这个html：

                   <table>
                      <thead id="tblHead">
                          <th v-for="item in items">
                              {{ item.message }}
                          </th>
                      </tr>
                  </thead>
                  <tbody id="tblInside">

                        <tr>
                          <td v-for="tdStuff in stuffsTD">
                              {{ tdStuff.message }}
                          </td>
                      </tr>
                  </tbody>
                  </table>

Answer 2

我自己想出来的。我必须在tr元素上使用v-for

 <table id="tblData">
                             <thead>
                                 <tr>
                               <th v-for="column in columns">
                                 {{ column | uppercase }}
                                   </th>
                                  </tr>
                               </thead>
                           <tbody>
                           <tr v-for="tableData in tableData">
                              <td>
                                  {{ tableData.client }}
                              </td>
                              <td>
                                  {{ tableData.ad }}
                              </td>
                              <td>
                                  {{ tableData.rt }}
                              </td>
                           </tr>
                           </tbody>
                        </table>

和

var tbl = new Vue({
    el: '#tblData',
    data: {
        columns: [ 'some', 'thing', 'here' ],
        tableData: [ 
            {
                some: 'A STORE',
                thing: 'Summer',
                here: '1:32'
            },
            {
                some: 'Computer Store',
                thing: 'fix',
                here: '2:14'
            },
            {
                some: 'Store 2',
                thing: 'MTG',
                here: '0:47'
            }
         ]
    }
})