[Vuejs]-How to print correct number of rows in a table with Vue

0👍

try this 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>

0👍

Figured it out on my own. Have to use v-for on the tr element

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

and

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

Leave a comment