在 Vue 中保持列表组件处于活动状态

Question

我有一个组件列表，我使用v-for. 并非所有组件都同时显示。我使用slice.

这些组件不应重新渲染，因为其中一些具有用户输入的数据，而其中一些执行与网络相关的任务。

我尝试使用<keep-alive>. 但是，这仅呈现第一个组件。

<keep-alive>
    <component :is="component.type" :key="component.id" v-for="component in components">
</keep-alive>

如何保持组件的动态列表处于活动状态？

Answer 1

 <div v-for="comp in compList"  :key="'container'+comp.keyId" >
    <keep-alive>
      <component :is="comp.type" :key="comp.keyId"></component>
    </keep-alive>
 </div>

以上对我有用。将元素正确地推送到 compList 会创建其各自组件的新实例。在数组中移动元素的索引，维护键，不调用 destroy/create 并维护每个组件内的状态

Answer 2

用小提琴测试了上面的答案，但不起作用。https://jsfiddle.net/z11fe07p/680/

 <div v-for="component in myComponents"  :key="component.id" >
    <keep-alive>
      <component :is="component.type" 
               :name="component.name">
      </component>
    </keep-alive>
 </div>

另外，我会避免使用 vue 保留字，例如components因为 vue 实例中有一个components键，它告诉实例正在使用哪些组件。