当数组的索引值不唯一时使用什么？
What to use when index value of array isn't unique?
我有一个问题。
今天我开始制作手风琴菜单（用于常见问题解答）。
我正在尝试做到这一点，所以当时只有一个项目是开放的。
它有点管用，我当时使用索引值打开一个。
但是，当您查看我的数组时，您可以看到例如有 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>
通常，无论出于何种原因我无法在对象 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 这样的键，使它们独一无二
您可以使用问题索引和类别索引的串联。这样新创建的索引将始终是唯一的。
在您的示例中，我添加了 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>
我有一个问题。
今天我开始制作手风琴菜单（用于常见问题解答）。
我正在尝试做到这一点，所以当时只有一个项目是开放的。
它有点管用，我当时使用索引值打开一个。
但是，当您查看我的数组时，您可以看到例如有 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>
通常，无论出于何种原因我无法在对象 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 这样的键，使它们独一无二
您可以使用问题索引和类别索引的串联。这样新创建的索引将始终是唯一的。
在您的示例中，我添加了 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>