Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of How to have `v-divider` components between each `v-list-item`? without wasting too much if your time.
The question is published on by Tutorial Guruji team.
The question is published on by Tutorial Guruji team.
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>
Answer
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.
We are here to answer your question about How to have `v-divider` components between each `v-list-item`? - If you find the proper solution, please don't forgot to share this with your team members.