Question

我已阅读了大量文档，但我无法使用以下用例：

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

产品过滤器实例的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解决这个问题？

感谢您的帮助！

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

谢谢！

在同一页面上两次渲染相同的组件（具有同步数据）

1 个答案: