如何将动态创建的组件的顺序与其他组件的顺序联系起来？答案

【问题标题】：How to link order of dynamically created components with other component order?如何将动态创建的组件的顺序与其他组件的顺序联系起来？
【发布时间】：2021-09-11 20:29:14
【问题描述】：

我刚学vue 3，遇到以下问题。我使用只提供tab headers 而没有content panels 的标签库。所以，我的解决方案如下：

<myTabs/><!-- < -- headers -->
<div v-for="tab in tabs" ><!-- < -- content -->
   <keep-alive>
      <component v-if="tab.active" :is="tab.component"></component>
   </keep-alive>
</div>

标签是这样创建的：

const tabs: Array<Tab> = reactive<Array<Tab>>([])

所以，我有选项卡，对于内容面板，我迭代选项卡并仅显示活动选项卡内容。该解决方案的唯一问题是，当更改标签的顺序（交换后）时，内容的顺序！=标签的顺序。

例如，我有两个标签 (0,1)。交换标签后的顺序是（1,0），但内容的顺序仍然是（0,1）。因此，当我激活 tab1 时，我会看到 tab0 的内容。谁能帮我解决它？

【问题讨论】：

您可以将tabs 设为computed 属性，该属性返回标签的有序列表。

标签： javascript typescript vue.js

【解决方案1】：

您的 v-for 项目需要 key attribute 以便 Vue 知道如何跟踪项目渲染。如果没有 key，Vue 默认使用 v-for 中的项目索引，在您的情况下，这会导致不希望的 VNode 重用。

要解决此问题，请在每个 v-for 项目上应用唯一的 key（例如 id 属性）：

<div v-for="tab in tabs" :key="tab.id">

【讨论】：