[Vuejs]-Vue mount data to many divs or table

by

0👍

Use v-for to loop over each item in the array and generate the rows of the table.

<table>
  <thead>
    <tr>
      <th>Box</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr v-for="row of rows">
      <td>{{ row.box }}</td>
      <td>{{ row.name }}</td>
    </tr>
  </tbody>
</table>

data: {
  rows: [
    { box: 1, name: 'a' },
    { box: 2, name: 'b' },
    { box: 3, name: 'c' }
  ]
}

You say you want to generate a 5×5 table; is your data sparse (only some cells contain data, others may be empty)? Please provide more information about exactly what you want the resulting table to look like and how you are storing the data.

Typically your data model should reflect what you want the table to look like; the templates are just "pure functions" that generate a view from the data without too much manipulation. Your data should be a "5×5 table" that you can just loop over in the template to generate the HTML.

If you are storing the associated data in a sparse kind of way (like an array where each item has a cell position { row: 1, col: 2 }, then you can use a computed property to generate the full table model with the relevant cells filled in with the necessary data, then the template will be basically the same as what I have shown above. You shouldn’t be doing data manipulations in the template, do it in code in computed properties.

Leave a comment