[Vuejs]-How to add a new line using for loop?

by

1👍

✅

<script>
 export default {
   data() {
  return {
    alphabet: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
  }
 }
}
</script>

<template>
  <div>
    <span v-for="(item, index) in alphabet" :key="index">
      {{ item }} <br v-if="(index + 1) % 6 == 0" />
    </span>
  </div>
</template>

you can try this, it would add a br after every 6 letters, and then you can add whatever styling you want to make it look like the matrix you mentioned above

👤Anuj Gajbhiye

5👍

I would use here simple css by displaying this array and the button in grid.

<div class="table">
  <div class="table__item" v-for="(item, index) in alphabet" :key="index">
      {{ item }}
  </div>
  <div class="table__button">button</div>
</div>

.table {
  display: grid;
  grid-template-columns: repeat(6, 20px);
  grid-template-rows: repeat(6, 20px);
}

.table__item {
  display: flex;
  align-items: center;
  justify-content: center;
}

.table__button {
  grid-column: 4 / 6;
  grid-row: 5;
  background: red;
}
👤ElizabethSetton

Leave a comment