typescript - Array i props i Vue-komponenter är inte reaktiv

Jag har en array med komponentdata och försöker rendera den med 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>

Så problem:

När component.options har en array-egenskap med 1 element, som

tabs: [{tab}]

det fungerar bra, men när flikar har 2 eller fler tabbar, som detta

tabs: [{tab},{tab}]

Komponenten bevakar inte förändringar i den andra fliken.

Så, jag löste det med dynamisk nyckel

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

men det gör att komponenten renderas om efter varje ändring och återställer komponentens tillstånd till standard.

UPD: Jag har hittat samma problem med reaktiva nästlade V-For med Vue/Vuex men det har inte något svar :(

Svar #1

Glad att hjälpa

Jag skulle lägga till nyckeln, eller en ny nyckel till "editor-component" Div så när den div ändras kommer båda komponenterna inuti att renderas om. Kolla också slutavsnittet av denna artikel om force-re-rerednering: https://michaelnthiessen.com/force-re-render

För att åtgärda ditt problem med att flikarna återställs varje gång: läs den här artikeln: Vuex state on page refresh and multiple tabs

Jag tror att du behöver titta på vuex eller något liknande för bestående tillstånd.

Svar #2

Tack @Sweet Chilly Philly, jag har nästan löst problemet

        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>

Jag räknar längden på arrayer i options-objektet och genererar en nyckel, och det renderas om komponenten endast om ett element läggs till i arrayen. Men problemet med b-tab (bootstrap-vue) finns fortfarande http://recordit.co/dpASWfvoaB

Relaterade artiklar