如何在每个“v-list-item”之间有“v-divider”组件？答案

【问题标题】：How to have `v-divider` components between each `v-list-item`?如何在每个“v-list-item”之间有“v-divider”组件？
【发布时间】：2021-05-28 07:38:26
【问题描述】：

我正在尝试根据我有多少答案来迭代 v-divider，以便我为每个答案 (4) 设置一个分隔符。从官方文档上的example 中得到提示，我正在尝试这样的事情，但我无法理解，有人可以向我解释我哪里错了吗？

这是代码：

<template>
  <div class="dark2">
    <v-card max-width="600" class="mx-auto">
      <v-toolbar extended class="mt-10" color="light-blue" dark>
        <v-toolbar-title class="flex text-center">
          <h2 class="text-center mt-10">Quiz Dark 2</h2>
        </v-toolbar-title>
      </v-toolbar>

      <v-progress-linear :value="progress"></v-progress-linear>

      <v-list subheader two-line v-for="(element, index) in questions.slice(a,b)" :key="index" v-show="quiz">
        <h1 class="text-center my-4">Domanda {{ b }}/{{ questions.length }}</h1>
        <v-list-item class="d-flex justify-center text-center">{{ element.question }}</v-list-item>
        <v-divider class="mt-10"></v-divider>

        <v-list-item-group active-class="pink--text">
          <v-list-item class="d-flex justify-center my-2" v-for="(item, index) in element.suggestions" :key="index">
            {{ item.suggestion }}
          </v-list-item>
          <v-divider v-if="index < questions.length - 1"
                     :key="index"></v-divider>
        </v-list-item-group>
      </v-list>

    </v-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      questions: [
        {
          question: 'Cosa lascia Micheal kanhnwald a suo figlio Jonas prima di impiccarsi?',
          suggestions: [
            {suggestion: 'Un libro'},
            {suggestion: 'Una lettera'},
            {suggestion: 'Una torcia futuristica'},
            {suggestion: 'Un contatore Geiger'}
          ]
        }
      ],
      a: 0,
      b: 1,
      select: false,
      score: 0,
      quiz: true,
      score_show: false,
      next: false,
      progress: 0
    }
  }
}
</script>

【问题讨论】：

标签： javascript vue.js vue-component vuetify.js

【解决方案1】：

正如您在 Vuetify 官方文档 Lists Component / Action stack 提供的示例中看到的那样，您的 v-list-item-group 标签内应该有一个 template 标签。像这样的：

  <v-list-item-group active-class="pink--text">
    <template v-for="(item, index) in element.suggestions">
      <v-list-item class="d-flex justify-center my-2" :key="index">
        {{ item.suggestion }}
      </v-list-item>
      <v-divider
          v-if="index < element.suggestions.length - 1"
          :key="`${index}-divider`"
      ></v-divider>
    </template>
  </v-list-item-group>

唯一的区别是在v-list-item-group 中添加template，然后在自定义template 中的v-list-item 旁边添加v-divider。

希望对您有所帮助，祝您编码愉快。

【讨论】：

感谢您的指正，我采纳了您的建议。然而，这并不能帮助我解决 v-divider 的问题，它不会为“建议”列表中的每个元素创建一个
对不起，我错过了纠正v-if部分数学，我编辑了答案，用index < (element.suggestions.length - 1)尝试新的
没什么，v-divider 放在元素旁边，但它应该在它下面i.gyazo.com/917aafdc
链接不存在，顺便说一句我更新了代码，你用<v-divider v-if="index < (element.suggestions.length - 1)" :key="index"></v-divider>替换了v-divider吗？ if 之前的条件是错误的
是的，我做到了，但这就是发生的事情，而 v-divider 应该在每个项目下方 i.gyazo.com/1d7bcdfe5b6263535ed10936f6311aa0.png

【解决方案2】：

一个更好的变体是在 index != 0 v-show="index !== 0" 时显示分隔符

<v-list-item-group active-class="pink--text">
 <template v-for="(item, index) in element.suggestions">
  <v-divider v-show="index !== 0"></v-divider>
  <v-list-item class="d-flex justify-center my-2" :key="index">
    {{ item.suggestion }}
  </v-list-item>
 </template>
</v-list-item-group>

【讨论】：