在同一頁上渲染相同的組件（與同步數據）兩次

我已閱讀了大量文檔，但無法獲得以下用例：在同一頁上渲染相同的組件（與同步數據）兩次

我有一個組件的產品過濾器」。該組件包含的子組件「產品 - 過濾 - 選項」這使得一個單獨的過濾選項（複選框與標籤）

的產品過濾器實例JSON數據是這樣的：

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

我已經我的頁面上有多個產品過濾器實例（以及大量的產品過濾器選項實例）。到現在爲止還挺好。現在我想在我的頁面上多次渲染我的一個過濾器（例如，給定的Category過濾器）（當前'突出顯示'過濾器，可以在用戶交互過程中更改）。

所以我試着用下面的模板代碼解決這個問題：

<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屬性設置）。但是與您在更改「克隆」過濾器中的選項時可能會猜到的一樣，原始過濾器不會更改，因爲這些「克隆」之間的數據未同步。我該如何解決這個問題？

感謝您的幫助！

來源

2016-09-09 NickGreen

'：options.sync =「activefilter.options」'？我可能不明白你在問什麼。 –

有沒有什麼方法可以將它提取到一個簡單的代碼片段來演示問題？ –

@RoyJ這確實是修復的一部分。我早些時候嘗試過，但我錯過了另一個同步，請參閱下面的鏈接。感謝您的洞察！ – NickGreen

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

謝謝！

來源

2016-09-09 14:32:08 NickGreen

在同一頁上渲染相同的組件（與同步數據）兩次

回答

相關問題