我有一個問題。
今天我開始制作手風琴選單（用于常見問題解答）。
我正在努力做到這一點，因此當時只有一件商品處于打開狀態。
它有點作業，我當時使用索引值打開一個。
但是，當您查看我的陣列時，您會發現例如有 5 個索引 [0]，因為我將問題按類別進行了排序。
我知道我可以手動將 Id 添加到我的問題中，但我很好奇是否有另一種方法然后手動添加 Id 號。
順便說一句，我正在使用 Vue.js (Nuxt.js)。找不到我的問題的答案。
下面的片段（不是一個作業示例，只是為了向您展示代碼）。
先感謝您。
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>uj5u.com熱心網友回復：
通常，無論出于何種原因，我都不能在物件 ID 中使用，因為key我使用此技術使它們獨一無二：
假設我有兩個陣列，一個用于問題，一個用于問題項，那么我可能會這樣做：
<question v-for="(question, i) in questions" :key="`question-${i}`"></question>
那么對于我可以有的問題專案：
<question-item v-for="(questionItem, i) in questionItems" :key="question-item-${i}"></question-item>
這將生成像這樣的鍵question-0，question-item-0這使它們獨一無二
uj5u.com熱心網友回復：
您可以使用問題索引和類別索引的串聯。這樣，新創建的索引將始終是唯一的。
在你的例子中，我添加了categoryIndex，重命名index為questionIndex和其他地方替換index為`${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>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/341255.html
標籤：javascript html 数组 Vue.js nuxt.js
下一篇：串列陣列中的線性搜索