Массив в подпорках в Vue Components не реагирует

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 имеет опору массива с 1 элементом, например

tabs: [{tab}]

это хорошо работает, но когда вкладки имеют 2 и более вкладок, как это

tabs: [{tab},{tab}]

Компонент не отслеживает изменения во второй вкладке.

Итак, я решил это с помощью динамического ключа

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

, но компонент выполняет повторную визуализацию после каждого изменения и сбрасывает состояние компонента по умолчанию.

UPD: Я обнаружил ту же проблему Реактивные вложенные V-For, использующие Vue / Vuex , но они не отвечают: (

Answer 1

рады помочь

Я бы добавил ключ или новый ключ к Div "editor-component", чтобы когда этот div изменялся с обоими компонентами внутри, он перерисовывался, также ознакомьтесь с последним разделом этой статьи о принудительном повторном перенаправлении : https://michaelnthiessen.com/force-re-render

Чтобы решить проблему с сбросом вкладок каждый раз: прочитайте эту статью: Состояние Vuex при обновлении страницы и нескольких вкладках

Я думаю, вам нужно посмотреть на vuex или что-то подобное для сохраненного состояния.

Answer 2

<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 : {}"
/>

Я думаю, вы можете просто использовать имя компонента в качестве ключа. Поскольку имя компонента должно быть уникальным

Answer 3

Спасибо @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>

Я подсчитываю длину массивов в объекте параметров и генерирую ключ, и он перерисовывает компонент, только если элемент добавлен в массив. Но проблема с b-tab (bootstrap-vue) все еще существует http://recordit.co/dpASWfvoaB