Is there a way to populate a table headers and rows using a single object? I wrote the following code but

<table v-for="(table, index) in table" :key="index">
  <thead>
    <tr>
      <th>
        {{ table.header }}
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        {{ table.rows }}
      </td>
    </tr>
  </tbody>
</table>
-------------
data(){
  return{
      table: {
        headers: ["header 1", "header 2"],
        rows: ["row 1", "row 2", "row 3", "row 4"],
      },
  }
}

but it doesn't render anything!

I want the two table headers to be:

header 1 and header 2

and the table rows in header 1 column to be:

row 1, row 2, row 3, row 4

CodePudding user response：

If I understand you correctly you could use a v-for in your <td> element. It would look something like <td v-for="(row, index) in table.row" :key="index" />

CodePudding user response：

<script setup>
const table = {
  headers: ["header1", "header2"],
  rows: [
    {
      header1: ["row 1", "row 2", "row 3", "row 4"],
      header2: ["row 1", "row 2", "row 3", "row 4"],
    }
  ]
}
</script>

<template>
  <table v-for="(item, i) in table.headers" :key="i">
    <thead>
      <tr>
        <th>
          {{ item }}
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(items, k ) in table.rows" :key="k">
        <td>
          {{ items[item] }}
        </td>
      </tr>
    </tbody>
  </table>
</template>

You can try this