0

我已经阅读了很多文档，但无法使用以下用例：

我有一个组件“产品过滤器”。该组件包含子组件“product-filter-option”，它呈现一个单独的过滤器选项（带有标签的复选框）

product-filter 实例的 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 实例）。到现在为止还挺好。现在我想在我的页面上多次呈现我的过滤器之一（例如给定的类别过滤器）（当前的“突出显示”过滤器，可以在用户交互期间更改）。

因此，我尝试使用以下模板代码解决此问题：

<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 解决这个问题？

谢谢你的帮助！

4

1 回答 1

0

@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-09T14:32:08.007 回答