私はドキュメントをたくさん読みましたが、私は仕事には、以下のユースケースを取得することはできません同じページ

Question

に二回（同期データ付き）同じコンポーネントをレンダリング'製品・フィルタインスタンスのためのこのコンポーネントは、個々のフィルタオプション（ラベルの付いたチェックボックス）をレンダリングする子コンポーネントの製品・フィルタ・オプションを 'を含む

JSONデータは、次のようになります。

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

私はしました私のページにproduct-filter（と多くのproduct-filter-optionインスタンス）のインスタンスが複数あるここまでは順調ですね。 私のフィルタ（例えば、指定されたカテゴリフィルタ）の1つを自分のページ（現在の「強調表示された」フィルタの一種で、ユーザのやりとり中に変更することができます）に複数回レンダリングしたいと思います。

だから私は、次のテンプレートコードでこの問題を解決するために試してみた：

<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> 

ので、このフィルタは、今（VUEアプリでアクティブフィルタプロパティが設定されている場合のみ）私のページに2回表示されます。 この 'クローン化された'フィルタでオプションを変更すると推測されるように、元のフィルタは変更されません。データはこれらの 'クローン'間で同期されないためです。 これをVueでどのように修正できますか？

ありがとうございました！

Answer 1

@ roy-j、同期についてのご意見ありがとうございます。私はすでに設定してみました：

<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'！

ありがとうございます！