How to Add Line Break in Vue JS v-for loop with CSS

Question

I need to display the names in Alphabetical order if a list item is clicked. I am using Vue.js and Flex Grid for this.

I have a list item named ListAll,

On Clicking the ListAll, I have to display all the records grouped by names from nameList array. I am facing a problem in displaying the grouped names. I am using Flex Grid for displaying names. After displaying the records for A, records for B should start in a new line, but B records not break to a new line. How to add a line break after each set of names using Vue js or ES6 or CSS syntax?

I have added a line break like this <div class="break"></div>, but it is not breaking the records.

Records are displaying in 4 columns without a line break using flexbox grid CSS class like this,

Apples Apricots Avocados Almond
Abiu Berry Bananas Boysenberries 
Blueberries Breadfruit Carambola Cantaloupe 
Cranberries Cherries Custard-Apple

Expected Result:

Apples Apricots Avocados Almond
Abiu 
Berry Bananas Boysenberries Blueberries 
Breadfruit
Carambola Cantaloupe Cranberries Cherries
Custard-Apple

AlphabeticalFruitsName.vue

<template>
    <div id="wrapper">
        <ul class="listitems">
            <li><a
                href="javascript:;" @click="userSelection('ListAll')">ListAll</a>
            </li>
        </ul>
        <div class="grid-container">
            <div v-for="(name, index) in nameList" :key="name" class="grid-item">
                <ul v-for="letter in alphabets" :key="letter">
                    <li v-if="name.startsWith(letter)"><a>{{ name }}</a></li>
                    <div class="break"></div>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  name: 'AlphabeticalFruitsName',
  data() {
    return {
      nameList: [],
      alphabets: ['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',],
      names: [
        { name: 'Apples' },{ name: 'Apricots' },{ name: 'Avocados' },{ name: 'Apple Berry' },
        { name: 'Apple guava' },{ name: 'Almond' },{ name: 'Almond' },{ name: 'African Honeysuckle' },
        { name: 'African Plum' },{ name: 'Abiu' },{ name: 'Bananas' },{ name: 'Boysenberries' },
        { name: 'Blueberries' }, { name: 'Bing Cherry' },{ name: 'Breadfruit' },{ name: 'Cantaloupe' },
        { name: 'Carambola' },{ name: 'Cherimoya' },{ name: 'Cherries' },{ name: 'Cranberries' },
        { name: 'Custard-Apple' },{ name: 'Dates' }, { name: 'Honeysuckle' },{ name: 'Gooseberries' },
        { name: 'Grapefruit' },{ name: 'Grapes' },{ name: 'Guava' },{ name: 'Tangerine' },
        { name: 'Kiwi' },{ name: 'Lychee' },{ name: 'Strawberries' }, { name: 'Watermelon' }],
    };
  },
  methods: {
      userSelection(listItemName) {
      this.nameList = [];
      if (listItemName === 'ListAll') {
        for (const value of this.names) {
          this.nameList.push(value.name);
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.listitems {
display: flex;
justify-content: center;
}

ul {
    list-style-type: none;
}

.grid-container {
    display: grid;
    grid-template-columns: auto auto auto auto;
    padding: 10px;
}

.grid-item {
    text-align: center;
}

.new-line:last-child {
    content: '\a';
    white-space: pre;
}

.break {
    flex-basis: 100%;
    height: 0;
}
</style>

Answer 1

This will check every element after the first to see if the first letter of the current name and previous name do not match, and if not it will output a br. I'm assuming your list will be alphabetized already.

<div v-for="(name, index) in nameList" :key="name" class="grid-item">
    <ul v-for="alphabet in alphabets" :key="alphabet">
        //a BR or whatever element you need
        <br v-if="i > 0 && nameList[i-1].name.charAt(0) !== name.charAt(0)"/>
        <li v-if="name.startsWith(alphabet)"><a>{{ name }}</a></li>
        <div class="break"></div>
    </ul>
</div>