VueJS：入力チェックボックスとdiv要素のトグル

Question

私はチェックボックスが付いたフォームを持っています。これを選択すると、ページのdivがユーザーの二次的なアクション情報とともに表示されます。各チェックボックスには、より詳しい情報を持つ専用のdivがあります。

しかし、私は2つのチェックボックスに同じ命令が含まれていますが、両方を選択すると2つの命令のインスタンスが表示されるという問題があります。

ユーザが両方のチェックボックスを選択した場合、1組の命令のみが表示されるように条件ロジックを書き込むにはどうすればよいですか？ DEMO

シナリオ：

は、ここで問題のライブデモだ

選択DEF - > CUSTOM STATIC GRAPHIC SUPPORTとCUSTOMアニメーションSUPPORT、あなたは「の2つのコピーが記入方法がわかりますページの下部に「ここにカスタムグラフィックサポート」要素が表示されます。

スニップHTML：のように、そううまくいきませんでした書き込むための

 <label for="custom_static_graphic"> 
      <input type="checkbox" id="custom_static_graphic" value="Custom Static Graphic" v-model="selectedProducts">Custom Static Graphic Support 
     </label> 

     <label for="custom_animation"> 
      <input type="checkbox" id="custom_animation" value="Custom Animation Support" v-model="selectedProducts">Custom Animation Support 
     </label> 

私の試み：

<div class="alert alert-success" v-if="(!selectedOffice.inJira) && ((product ==='Custom Animation Support') || (product === 'Custom Static Graphic'))">Fill out the custom graphic support here</div> 

Answer 1

私はループの外のdivを取ってしまいました。