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

Question

我有个问题。

今天我开始做手风琴菜单(为常见问题解答)。

我正在努力使它，所以只有一个项目是开放的时候。

它有点工作，我正在使用的索引值，让一个打开在当时。

但是当您查看我的数组时，您可以看到，例如，有5个索引，因为我在类别中对问题进行了排序。

我知道，我可以手动添加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，并在其他地方用`${categoryIndex}-${questionIndex}`替换了index

​

<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这样的键，这使它们成为唯一的