I've got a question.
Today I started making an accordion menu (for FAQ's).
I am trying to make it so only one item is open at the time.
It kinda works, I am using the index value to have one open at the time.
But when you take a look at my array you can see that there are for example 5 index[0]'s because I sorted the question in category's.
I know that I can manually add Id's to my questions but I am curious if there is another way then manually adding Id numbers.
Btw, I am using Vue.js (Nuxt.js). Couldn't find an answer on my question.
Snippet down below (not a working example but just to show you the code).
Thank you in advance.
export default {
data() {
return {
isActive: null,
questionRows: {
questionRow1: {
category1: {
title: 'Over het systeem',
questions: {
question1: {
question: 'Wat is Lorem ipsum dolor sit amet?',
answer: 'Dit is antwoord 1',
},
question2: {
question: 'Wat is Lorem ipsum dolor sit amet?',
answer: 'Dit is antwoord 2',
},
question3: {
question: 'Wat is Lorem ipsum dolor sit amet?',
answer: 'Dit is antwoord 3',
},
question4: {
question: 'Wat is Lorem ipsum dolor sit amet?',
answer: 'Dit is antwoord 4',
},
},
},
category2: {
title: 'Ander onderwerp',
questions: {
question1: {
question: 'Wat is Lorem ipsum dolor sit amet?',
answer: 'Dit is antwoord 5',
},
question2: {
question: 'Wat is Lorem ipsum dolor sit amet?',
answer: 'Dit is antwoord 6',
},
},
},
},
questionRow2: {
category1: {
title: 'Over Notafy',
questions: {
question1: {
question: 'Wat is Lorem ipsum dolor sit amet?',
answer: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.',
},
question2: {
question: 'Wat is Lorem ipsum dolor sit amet?',
answer: 'Dit is antwoord 7',
},
},
},
category2: {
title: 'Campagnes',
questions: {
question1: {
question: 'Wat is Lorem ipsum dolor sit amet?',
answer: 'Dit is antwoord 8',
},
question2: {
question: 'Wat is Lorem ipsum dolor sit amet?',
answer: 'Dit is antwoord 9',
},
question3: {
question: 'Wat is Lorem ipsum dolor sit amet?',
answer: 'Dit is antwoord 10',
},
question4: {
question: 'Wat is Lorem ipsum dolor sit amet?',
answer: 'Dit is antwoord 11',
},
},
},
category3: {
title: 'Overig',
questions: {
question1: {
question: 'Wat is Lorem ipsum dolor sit amet?',
answer: 'Dit is antwoord 12',
},
},
},
},
},
};
},
methods: {
toggleItem(index) {
if (this.isActive === index) {
this.isActive = null;
return;
}
this.isActive = index;
},
},
};<div v-for="category in questionRows.questionRow1" :key="category.id">
<div class="flex items-center mb-3">
<h3 class="text-blue text-lg font-bold">{{ category.title }}</h3>
</div>
<div class="flex flex-col gap-3">
<div v-for="(question, index) in category.questions" :key="question.id">
<div :class="{ 'active-class' : isActive === index}" class="justify-between w-full min-h-min bg-white rounded-2xl select-none">
<div class="cursor-pointer" @click="toggleItem(index)">
<div :class="{'pb-5' : isActive !== index}" class="flex justify-between items-center text-button pt-6 pl-10 pr-7">
<h3 class="font-bold">{{ question.question }}</h3>
<font-awesome-icon v-if="isActive === index" :icon="['fas', 'sort-up']"/>
<font-awesome-icon v-else :icon="['fas', 'sort-down']"/>
</div>
</div>
<p v-if="isActive === index" class="mt-3 text-sm text-blue pl-10 pr-7 pb-5">
{{ question.answer }}
</p>
</div>
</div>
</div>
</div>
<div v-for="category in questionRows.questionRow2" :key="category.id">
<div class="flex items-center mb-3">
<h3 class="text-blue text-lg font-bold">{{ category.title }}</h3>
</div>
<div class="flex flex-col gap-3">
<div v-for="(question, index) in category.questions" :key="question.id">
<div :class="{ 'active-class' : isActive === index}" class="justify-between w-full min-h-min bg-white rounded-2xl select-none">
<div class="cursor-pointer" @click="toggleItem(index)">
<div :class="{'pb-5' : isActive !== index}" class="flex justify-between items-center text-button pt-6 pl-10 pr-7">
<h3 class="font-bold">{{ question.question }}</h3>
<font-awesome-icon v-if="isActive === index" :icon="['fas', 'sort-up']"/>
<font-awesome-icon v-else :icon="['fas', 'sort-down']"/>
</div>
</div>
<p v-if="isActive === index" class="mt-3 text-sm text-blue pl-10 pr-7 pb-5">
{{ question.answer }}
</p>
</div>
</div>
</div>
</div>CodePudding user response：
generally when for whatever reason I can't use in object id's for the key I use this technique to make them unique:
suppose I have two arrays one for questions and one for question items then I might do something like this:
<question v-for="(question, i) in questions" :key="`question-${i}`"></question>
then for the question items I can have:
<question-item v-for="(questionItem, i) in questionItems" :key="question-item-${i}"></question-item>
this will generate keys like question-0 and question-item-0 which makes them unique
CodePudding user response：
You could use a concatenation of the question index and the category index. This way the newly created index would always be unique.
In your example I've added categoryIndex, renamed index to questionIndex and elsewhere replaces index by `${categoryIndex}-${questionIndex}`
<div v-for="(category, categoryIndex) in questionRows.questionRow2" :key="category.id">
<div class="flex items-center mb-3">
<h3 class="text-blue text-lg font-bold">{{ category.title }}</h3>
</div>
<div class="flex flex-col gap-3">
<div v-for="(question, questionIndex) in category.questions" :key="question.id">
<div :class="{ 'active-class' : isActive === `${categoryIndex}-${questionIndex}`}" class="justify-between w-full min-h-min bg-white rounded-2xl select-none">
<div class="cursor-pointer" @click="toggleItem(`${categoryIndex}-${questionIndex}`)">
<div :class="{'pb-5' : isActive !== `${categoryIndex}-${questionIndex}`}" class="flex justify-between items-center text-button pt-6 pl-10 pr-7">
<h3 class="font-bold">{{ question.question }}</h3>
<font-awesome-icon v-if="isActive === `${categoryIndex}-${questionIndex}`" :icon="['fas', 'sort-up']" />
<font-awesome-icon v-else :icon="['fas', 'sort-down']" />
</div>
</div>
<p v-if="isActive === `${categoryIndex}-${questionIndex}`" class="mt-3 text-sm text-blue pl-10 pr-7 pb-5">
{{ question.answer }}
</p>
</div>
</div>
</div>
</div>