Vue 컴포넌트의 소품 어레이가 반응하지 않음

Vue 컴포넌트의 소품 어레이가 반응하지 않음

구성 요소 데이터가 포함된 어레이가 있으며 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: Vue/Vuex를 사용하는 V-For에 대해 동일한 문제가 발견되었지만 응답하지 않았습니다. : (

내가 기꺼이 도와줄게.

키 또는 새로운 키를 "div-component" Div에 추가하고, 그 div가 양쪽 컴포넌트 안에 있는 컴포넌트와 함께 변경되면 다시 렌더링합니다.또, 강제 재레드닝에 관한 이 문서의 마지막 섹션도 확인해 주세요.https://michaelnthiessen.com/force-re-render

탭이 매번 리셋되는 문제를 해결하려면 다음 문서를 참조하십시오.페이지 새로 고침 및 여러 탭의 Vuex 상태

지속 상태를 확인하려면 vuex나 비슷한 것을 살펴봐야 할 것 같습니다.

@Sweet Chilly 덕분에 나는 문제를 거의 해결했다.

        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

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

구성 요소 이름만 키로 사용하면 될 것 같습니다.구성 요소 이름은 고유해야 합니다.

언급URL : https://stackoverflow.com/questions/56942479/array-in-props-in-vue-components-is-not-reactive