typescript - Vue Components 中 props 中的数组不是响应式(Reactive)的

Question

我有一个包含组件数据的数组，并尝试用 v-for 渲染它

<div :style="style" class="editor-component" v-for="(component, index) in components">
    <Component
       :is="component.name"
       v-bind="component.options"
       :key="createKey(component, index)"
       :style="component.style ? component.style : {}"
    />
</div>

所以问题:

当 component.options 有 array prop 和 1 个元素时，比如

tabs: [{tab}]

它很好用，但是当标签有 2 个或更多标签时，就像这样

tabs: [{tab},{tab}]

组件不监视第二个选项卡中的更改。

所以，我用数字 key 解决了它

createKey(component, index) {
   return JSON.stringify(component) + index
}

但它会在每次更改后重新渲染组件，并将组件状态重置为默认值。

更新:我发现了同样的问题 Reactive Nested V-For's using Vue/Vuex但它没有回答:(

Answer 1

乐于助人

我会向“editor-component”Div 添加 key 或新 key ，因此当该 div 随内部的两个组件发生变化时将重新呈现，另请查看本文关于强制重新渲染的最后一节: https://michaelnthiessen.com/force-re-render

要解决每次重置选项卡的问题:阅读这篇文章:Vuex state on page refresh and multiple tabs

我认为您需要查看 vuex 或类似的持久状态。