動的に作成された要素にさまざまなクラスを追加する

Question

オブジェクトの配列があり、それぞれに textValue、active、info などが含まれています。この配置をループして、各要素のボタンを表示します。内部のボタンごとに div を追加し、3 つの段落内でクラスを追加し、条件付きで各ボタンにいくつかの段落を表示しようとします。ボタンにイベントを追加し、それに ID を渡すので、アクティビティを true に設定し、異なる ID ごとに情報を表示します。ボタンをクリックするとアクティブなクラスが作成され、数量が表示されます。外側をクリックするか、ボタン自体をクリックするとクラスと数量が削除されます (p)。ボタンをクリックすると情報が開きます。ここにはボタンがあり、クリックすると div 情報が表示されます。非表示 (すでにこれを実行しました)、クラスを表示し、段落を表示したままにしたいのですが、これに条件を使用しますが、それができません。コードは次のとおりです:

リーリー

ボタンがクリックされ、オブジェクトの active が true に設定されたときの機能

リーリー

さまざまなテキスト値の配列があります

リーリー

別のコンポーネントでは、参照を提供および拒否することで、選択されたフィルター (selectedFilter) を渡しています。ここには関数があり、クリックされたときにボタンがアクティブのままで、段落などの optionButtonValue に基づいて表示されるようにします。ただし、アクティブのままにしておきます。ここでは、各ボタンの情報を非表示にするために activity を false に渡します。 ああああ

Answer 1

実際には、v-if には true と false だけが待っています。ただし、テキスト定義では v-if を使用します。これは正しくありません。まず、v-if="{filter.active || filter} " のように、v-if を条件付きでのみ変更できます。また、p タグに、定義変更テキスト {{ filter.active && ' bla bla を直接入力することもできます。 ' }}