vue mount data to many divs or table

Question

New to vue

trying to create a simple table or muliple divs (5 rows by 5 columns)

I would like to mount data to each of those td\div

I can change the data format coming in if it makes it easier, but planning on something like such

[{ box:1,
  name: 'a'
},
{ box:2,
  name: 'b'
},
{ box:3,
  name: 'c'
},
...
{ box:25,
  name: 'z'
}]

Was even thinking to adding row:1, col: 1 for box1, row:1, col2 for box 2 ... row:5, col:5 for box 25

Not sure how to setup the html and vue. Do i need to do a loop to create the table in html, or is this something that can be done in vue template?

Thanks

Decade Moon Decade Moon · Accepted Answer · 2018-08-18T03:22:31

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 5x5 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 "5x5 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.

vue mount data to many divs or table

1 Answers