当数组的索引值不唯一时使用啥？
Posted
技术标签:
【中文标题】当数组的索引值不唯一时使用啥？【英文标题】：What to use when index value of array isn't unique?当数组的索引值不唯一时使用什么？ 【发布时间】：2021-12-14 10:42:21 【问题描述】：我有一个问题。 今天我开始制作手风琴菜单（用于常见问题解答）。 我正在努力做到这一点，所以当时只有一个项目是打开的。 有点用，我当时正在使用索引值打开一个。 但是，当您查看我的数组时，您会看到例如有 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>【问题讨论】：
数组的索引值总是唯一的。 @SteveTomlin 如果您的模板中有多个 for 循环，并且所有键绑定都是索引值，那么您将有多个key=0、key=1 等等...
在您的代码中有:key="category.id" 和:key="question.id" 但我在您的questionRows 对象中没有任何问题ID 或类别ID
@CedricCholley 你是对的，但我添加了它以消除错误。没关系。
【参考方案1】：
您可以使用问题索引和类别索引的串联。这样新创建的索引将始终是唯一的。
在您的示例中，我添加了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>【讨论】：
感谢您的回答！很好解释。我还有一个问题，我还有一个questionRow1，所以当我在那个html上添加相同的东西时，它会在questionRow1和questionRow2中打开第一个...我将编辑我的问题也给你看questionRow1。对不起，我没有直接添加。你有什么解决方案吗？ :)
哦，我已经通过在它后面添加一个自定义词来解决它。对于 questionRow1，我将其更改为：$categoryIndex-$questionIndex-questionRow1，对于 questionRow2 $categoryIndex-$questionIndex-questionRow2.. 非常感谢您的解决方案！【参考方案2】：
通常，无论出于何种原因，我不能在 key 的对象 ID 中使用我使用这种技术来使它们独一无二：
假设我有两个数组，一个用于问题，一个用于问题项目，那么我可能会这样做：
<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 这样的密钥，这使得它们独一无二
【讨论】：
感谢您的回答，检查过，这个答案也很有效。我个人更喜欢塞德里克的回答:)。虽然它完全一样.. 这是一个很好的答案，我认为当你在模板中嵌套了 for 循环时效果最好，当你在模板的不同位置有多个 for 循环时，你不能连接索引，你可以为它们附加一个名称以避免duplicate key 错误以上是关于当数组的索引值不唯一时使用啥？的主要内容，如果未能解决你的问题，请参考以下文章