VueJS：輸入複選框和切換div元素

Question

我有一個複選框，當選中時，將顯示一個頁面上的div與用戶的一些輔助操作信息。每個複選框都有自己的特殊分區，包含更多信息。

但是，我有2個複選框，其中包含相同的說明，問題是當兩者都選中時，出現兩個指令實例。

如何編寫條件邏輯，以便在用戶選擇這兩個複選框時只顯示一組指令？

這裏的問題進行現場演示：DEMO

場景：

選擇DEF - >自定義靜態圖形支持以及自定義動畫支持，你會發現兩個副本如何「填寫自定義圖形支持這裏「元素顯示在頁面的底部。

剪斷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

我最終採取的股利外循環。