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

【问题标题】：How to print correct number of rows in a table with Vue如何使用 Vue 在表格中打印正确的行数
【发布时间】：2016-05-11 02:57:14
【问题描述】：

我刚刚开始学习 Vue，但在打印出我应该为表格获取的正确行数时遇到了一点问题。

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

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

【问题讨论】：

标签： javascript html html-table vue.js

【解决方案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>

【讨论】：

只创建 1 行 4 列。我试图每行只有 2 个项目。

【解决方案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'
            }
         ]
    }
})

【讨论】：