Javascript 如何使用CSS在Vue JS v-for循环中添加换行符

如果单击列表项，我需要按字母顺序显示名称。我正在使用Vue.js和Flex Grid来实现这一点

我有一个名为ListAll的列表项

单击ListAll时，我必须显示nameList数组中按名称分组的所有记录。我在显示分组名称时遇到问题。我使用Flex网格显示名称。显示A的记录后，B的记录应以新行开始，但B的记录不会中断到新行。如何使用Vue js或ES6或CSS语法在每组名称后添加换行符

我添加了这样的换行符

，但它并没有打破记录

使用flexbox grid CSS类将记录显示在4列中，没有换行符，如下所示

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

预期结果：

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

字母水果名称.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>

{{name}

导出默认值{
名称：'字母水果名称'，
数据（）{
返回{
姓名列表：[]，
字母表：[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’、】，
姓名：[
{name:'苹果'}，{name:'杏子'}，{name:'鳄梨'}，{name:'苹果浆果'}，
{name:'苹果番石榴'}，{name:'杏仁'}，{name:'杏仁'}，{name:'非洲金银花'}，
{name:'African Plum'}，{name:'Abiu'}，{name:'Bananas'}，{name:'Boysenberries'}，
{name:'蓝莓'}，{name:'冰樱桃'}，{name:'面包果'}，{name:'哈密瓜'}，
{name:'杨桃'}，{name:'樱桃'}，{name:'樱桃'}，{name:'蔓越莓'}，
{name:'奶油冻苹果'}，{name:'日期'}，{name:'金银花'}，{name:'醋栗'}，
{name:'葡萄柚'}，{name:'葡萄'}，{name:'番石榴'}，{name:'橘子'}，
{name:'猕猴桃'}，{name:'荔枝'}，{name:'草莓'}，{name:'西瓜'}，
};
},
方法：{
用户选择（listItemName）{
this.nameList=[]；
如果（listItemName==='ListAll'）{
for（此.names的常量值）{
this.nameList.push（value.name）；
}
}
},
},
};
.清单项目{
显示器：flex；
证明内容：中心；
}
保险商实验室{
列表样式类型：无；
}
.网格容器{
显示：网格；
网格模板列：自动；
填充：10px；
}
.表格项目{
文本对齐：居中；
}
.新品：最后一个孩子{
内容：'\a'；
空白：预处理；
}
.休息{
弹性基准：100%；
身高：0；
}

这将检查第一个元素之后的每个元素，以查看当前名称和以前名称的第一个字母是否不匹配，如果不匹配，将输出一个

br

。我想你的名单已经按字母顺序排列了

<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>

//BR或任何你需要的元素


{{{name}

这有帮助吗？我在链接中提到的br元素中尝试了css，但是没有任何效果。它正在使用相同的无序列表添加中断，并且没有移动到下一行添加

---

在正确的索引处中断，但列表项没有移动到下一行。为了理解，我添加了水平线（hr）而不是br