동일한 페이지에서 동일한 구성 요소 렌더링 (데이터 동기화)

Question

많은 설명서를 읽었지만 작동하려면 다음 유스 케이스를 사용할 수 없습니다.

'product-filter '. 나는했습니다

"name": "category", 
    "title": "Category", 
    "options": [ 
    { 
     "value": "value", 
     "label": "Label 1", 
     "active": true, 
     "amount": 8 
    }, 
    { 
     "value": "value2", 
     "label": "Label 2", 
     "amount": 15 
    }, 
    etc. 
    ] 

:이 구성 요소는 같은 제품 필터 예를 들어

JSON 데이터가 보이는 개별 필터 옵션 (레이블이 체크 박스)를 렌더링하는 하위 구성 요소 '제품 필터 옵션을'포함 내 페이지에 제품 필터 (및 많은 제품 필터 옵션 인스턴스)의 인스턴스가 여러 개 있습니다. 여태까지는 그런대로 잘됐다. 이제 내 페이지에서 내 필터 중 하나 (예 : 주어진 카테고리 필터)를 여러 번 렌더링하고 싶습니다 (사용자 상호 작용 중에 변경 될 수있는 현재 '강조 표시된'필터 종류).

가 그래서 나는 다음과 같은 템플릿 코드와 함께이 문제를 해결하기 위해 시도했다 :

<filter-component v-if="activefilter" 
            :name="activefilter.name" 
            :type="activefilter.type" 
            :title="activefilter.title" 
            :tooltip="activefilter.tooltip" 
            :configuration="activefilter.configuration" 
            :options="activefilter.options"> 
     </filter-component> 

그래서이 필터는 지금 내 페이지에 2 번 나타합니다 (VUE 응용 프로그램에서 activefilter 속성이 설정되어있는 경우에만). '복제 된'필터에서 옵션을 변경할 때 추측 할 수 있듯이 원래 필터는 변경되지 않습니다. 데이터가 이러한 '복제본'간에 동기화되지 않기 때문입니다. 이것을 Vue로 어떻게 해결할 수 있습니까?

도움 주셔서 감사합니다.

Answer 1

@ roy-j, sync에 대한 의견을 보내 주셔서 감사합니다. 이미 설정해 봤는데 :

<filter-component v-if="activefilter" 
             :name="activefilter.name" 
             :type="activefilter.type" 
             :title="activefilter.title" 
             :tooltip="activefilter.tooltip" 
             :configuration="activefilter.configuration" 
             :options.sync="activefilter.options"> 
      </filter-component> 

이것은 작동하지 않았습니다. 하지만 당신은 저에게 생각이 떠올랐습니다. 옵션 동기화가 문제가 아니 었습니다. '확인 된'상태의 동기화가 문제였습니다. 하위 구성 요소에 checked = "option.active"를 다음과 같이 변경하여 작동했습니다. : checked.sync = "option.acitve": 'filter-option-component'!

감사합니다.