Question

我刚刚开始学习Vue，而且我有一个小问题，打印出我应该为表格获得的正确行数。

我的表有2列和4行预期行。当我测试我的代码时，我得到一个包含2列的表和一行包含4个列值的表，使用v-repeat，或者我得到一个包含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>

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'
            }
         ]
    }
})

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

2 个答案: