Rendering же компонент (с синхронизированными данными) дважды на одной странице

Я читал много документации, но я не могу получить следующий случай использования для работы:Rendering же компонент (с синхронизированными данными) дважды на одной странице

У меня есть компонент «продукт-фильтр ». Этот компонент содержит дочерний компонент «продукт-фильтр-вариант», который оказывает индивидуальный вариант фильтра (флажок с меткой)

данные JSON для экземпляра продукта фильтра выглядит следующим образом:

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

Я на моей странице появилось несколько экземпляров фильтра продуктов (и множество экземпляров опций продукта-фильтра). Все идет нормально. Теперь я хотел бы сделать один из моих фильтров (например, данный фильтр категории) несколько раз на моей странице (вроде текущего «выделенного» фильтра, который может меняться во время взаимодействия с пользователем).

Так что я попытался исправить это с помощью следующего кода шаблона:

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

Благодарим за помощь!

источник

2016-09-09 NickGreen

': options.sync =" activefilter.options "'? Я, вероятно, не понимаю, о чем вы спрашиваете. –

Есть ли способ, которым вы могли бы перевести его на простой фрагмент, демонстрирующий проблему? –

@ RoyJ это действительно было частью исправления. Я пробовал это раньше, но я пропустил еще одну синхронизацию, см. Мой андерс ниже. Спасибо за понимание! – NickGreen

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

Спасибо!

источник

2016-09-09 14:32:08 NickGreen

Rendering же компонент (с синхронизированными данными) дважды на одной странице

ответ

Смежные вопросы