0

多くのドキュメントを読みましたが、次のユースケースを機能させることができません:

コンポーネント「product-filter」があります。このコンポーネントには、個々のフィルター オプション (ラベル付きのチェックボックス) をレンダリングする子コンポーネント '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 インスタンス) があります。ここまでは順調ですね。ここで、フィルターの 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>

そのため、このフィルターは私のページに 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 に答える