How to generating table that will have 3 columns per row

by

I use Vue 2.

I generate table from the collection:

  <table class="table table-striped table-bordered">
      <tbody>
        <tr v-for="(type, typeIndex) in getAllUpgradeTypes" :key="typeIndex">
          <td>
            <imageDesc
              style="margin-left: 10px"
              :title="type"
              :text="'Select an Option'"
              :zoneId="selectedZone.id"
            />
          </td>
        </tr>
      </tbody>
    </table>

Currently, the table created with multiple rows, each row has only one column and shows one item inside the column.

My question how can I generate a table which will contain 3 columns per row?

1 thought on “How to generating table that will have 3 columns per row”

  1. You need a second v-for on the <td> element. If you just want to hardcode the number 3 rather than base it off some data, you can do that:

    <td v-for="column in 3" :key="column">

    So for example, you could do something like this:

    <tr v-for="(type, typeIndex) in getAllUpgradeTypes" :key="typeIndex">
  <td v-for="column in 3">
    <imageDesc
      style="margin-left: 10px"
      :title="type"
      :text="'Select an Option'"
      :zoneId="selectedZone.id"
    />
  </td>
</tr>
    Reply

Leave a Comment