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.