当数组的索引值不唯一时使用什么？

Question

我有一个问题。
今天我开始制作手风琴菜单（用于常见问题解答）。
我正在努力做到这一点，所以当时只有一个项目是打开的。
有点用，我当时正在使用索引值打开一个。
但是，当您查看我的数组时，您会看到例如有 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>

Answer 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>

Answer 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 这样的密钥，这使得它们独一无二