CODEWITHSUNDEEP
vue.jsvuejs2vue-component
t56k
t56k

Reputation: 6981

Vue: how can I make a grid instead of just rows in a table?

Part of my Vue template looks like this:

<tr v-for="template in templates" :key="template.id" >
  <td width="400">
    <a @click="create(template.id)" class="hand-hover">
      <i :class="`fa fa-${template.icon} fa-fw`"></i>
      <strong>{{ template.label }}</strong>
    </a>
  </td>
</tr>

How can I change it so that I have two columns instead of just one, so it fills out column 1 to 50% of the length of templates then starts a new column?

I thought about dividing templates by two then just having two loops... is there a better way?

Upvotes: 0

Views: 184

Answers (1)

Will
Will

Reputation: 2121

If you don't need to be using a <table> per se, the easiest solution is to use a container with display: flex instead and v-for looped child div's that wrap horizontally like so:

.container {
  display: flex;
  flex-wrap: wrap;
  width: 800px;
}

However, if you really need to keep the <table>, you could compute a templatePairs array:

computed:
  templatePairs () {
    return this.templates.reduce((acc, n, i) => {
      i % 2 ? acc[acc.length - 1].push(n) : acc.push([n])
      return acc
    }, [])
  }

To be used like this:

<tr v-for="(templatePair, i) in templatePairs" :key="i">
  <td v-for="template in templatePair" :key="template.id" width="400">
    <a @click="create(template.id)" class="hand-hover">
      <i :class="`fa fa-${template.icon} fa-fw`"></i>
      <strong>{{ template.label }}</strong>
    </a>
  </td>
</tr>

Upvotes: 1

Related Questions