javascript - How to have `v-divider` components between each `v-list-item`? - Stack Overflow

admin管理员组

文章数量:1279206

I'm trying to iterate a v-divider based on how many answers i have, so that i have a divider for each answer (4). Taking a cue from an example on the official documentation i'm trying something like this but i can't get to the head, someone can explain to me where am i wrong?

This is the code:

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

I'm trying to iterate a v-divider based on how many answers i have, so that i have a divider for each answer (4). Taking a cue from an example on the official documentation i'm trying something like this but i can't get to the head, someone can explain to me where am i wrong?

This is the code:

<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-ponent
• vuetify.js

Share Improve this question Follow edited Feb 26, 2021 at 10:22 Mohammad Moallemi 65811 gold badge55 silver badges1515 bronze badges asked Feb 25, 2021 at 22:00 Daniele CadicinaDaniele Cadicina 9933 silver badges77 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

As you can see in the examples provided by Vuetify official document Lists Component / Action stack, you should be having a template tag inside your v-list-item-group tag. Something like this:

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

The only difference is having template inside v-list-item-group and then adding v-divider next to v-list-item inside the custom template.

Hope it helps, happy coding.

A little better variant is to show divider if 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>

本文标签： javascriptHow to have vdivider components between each vlistitemStack Overflow