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的数组prop具有1个元素，例如

tabs: [{tab}]

效果很好，但是当标签中有2个或更多标签时，就像这样

tabs: [{tab},{tab}]

组件不会在第二个标签中监视更改。

所以，我用动力学键解决了

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

但是它将使组件在每次更改后重新呈现，并将组件状态重置为默认状态。

UPD：我发现了同样的问题Reactive Nested V-For's using Vue/Vuex，但没有回答：（

Answer 1

感谢@Sweet Chilly Philly，我几乎解决了问题

        createKey(component, index) {
            let count = this.countOptionsLength(component.options);
            console.log(component.name, count);
            return `component_${index}_length_${count}`;
        }

        countOptionsLength(options) {
            let cnt = 0;

            for(let key in options) {
                if(options.hasOwnProperty(key)) {
                    let option = options[key];
                    if(Array.isArray(option)) {
                        cnt += option.length;
                    }
                    if(option && (Array.isArray(option) || isObj(option))) {
                        cnt += this.countOptionsLength(option)
                    }
                }
            }
            return cnt;
        }
        ...
<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>

我在options对象中计算数组的长度，并生成键，并且仅当元素添加到数组时才重新渲染组件。但是b-tab（bootstrap-vue）的问题仍然存在http://recordit.co/dpASWfvoaB

Answer 2

很乐意帮助

我将密钥或新密钥添加到“编辑器组件” Div中，以便当该div改变且其中的两个组件都将重新呈现时，还请查看本文的最后一节有关强制重新调音：https://michaelnthiessen.com/force-re-render

要解决每次重置标签时的问题：请阅读本文：Vuex state on page refresh and multiple tabs

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

Answer 3

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

我认为您可以仅使用组件名称作为键。因为组件名称应该唯一

Vue组件中道具中的阵列不起作用

3 个答案: