VueJS2：複選框和切換元素的可見性（如果值相同）

Question

我正在處理包含不同辦公室的下拉列表和複選框列表的表單。根據在下拉列表中選擇哪個辦公室，某些複選框將作出不同的反應。我得到的一切工作很好，你可以的jsfiddle點擊此處查看：

[JSFIDDLE]

然而，這裏是我的問題：

用「ABC」在下拉式選擇向下辦公室，當你檢查每個產品的盒子（除了「物理模型」），我只需要顯示ONE「你在JIRA平臺上，轉到這個表格」元素，不是多個 。我如何編寫代碼以便多個「你在JIRA平臺上，轉到這個表單」沒有顯示？

HTML：

<div id="app" class="container"> 

    <form> 

    <section id="office"> 
     <label> 
     <h3>Please specify your office:</h3> 
     </label> 
     <br> 
     <select id="office" v-model="selectedOffice" v-on:change="clearProductsSelection" required> 
     <option value="" selected disabled>-Select-</option> 
     <option v-for="office in officeList" :value="office">{{office.code}}</option> 
     </select> 
    </section> 

    <section id="productType" v-if="selectedOffice !== ''"> 

     <h3>Hello, {{selectedOffice.code}}! What do you need?</h3> 

     <div class="panel panel-default" v-if="selectedOffice.code !== 'External'"> 
     <div class="panel-body"> 
      <div class="checkbox"> 
      <label for="brief"> 
       <input type="checkbox" id="brief" value="Brief" v-model="selectedProducts">Brief 
       <aside><small>Some helpful static content here</small></aside> 
      </label> 
      </div> 
     </div> 
     </div> 

     <div class="panel panel-default" v-if="selectedOffice.code !== 'External'"> 
     <div class="panel-body"> 
      <div class="checkbox"> 
      <label for="custom_static_graphic"> 
       <input type="checkbox" id="custom_static_graphic" value="Custom Static Graphic" v-model="selectedProducts">Custom Static Graphic Support 
       <aside><small>Some helpful static content here</small></aside> 
      </label> 
      </div> 
     </div> 
     </div> 

     <div class="panel panel-default"> 
     <div class="panel-body"> 
      <div class="checkbox"> 
      <label for="custom_animation"> 
       <input type="checkbox" id="custom_animation" value="Custom Animation Support" v-model="selectedProducts">Custom Animation Support 
       <aside><small>Some helpful static content here</small></aside> 
      </label> 
      </div> 
     </div> 
     </div> 

     <div class="panel panel-default" v-if="selectedOffice.code !== 'External'"> 
     <div class="panel-body"> 
      <div class="checkbox"> 
      <label for="visual_consultation"> 
       <input type="checkbox" id="visual_consultation" value="Visual Consultation" v-model="selectedProducts">Visual Consultation 
       <aside><small>Some helpful static content here</small></aside> 
      </label> 
      </div> 
     </div> 
     </div> 

     <div class="panel panel-default"> 
     <div class="panel-body"> 
      <div class="checkbox"> 
      <label for="physical_model"> 
       <input type="checkbox" id="physical_model" value="Physical Model" v-model="selectedProducts">Physical Model 
       <aside><small>Some helpful static content here</small></aside> 
      </label> 
      </div> 
     </div> 
     </div> 

     <div class="panel panel-default" v-if="selectedOffice.code !== 'External'"> 
     <div class="panel-body"> 
      <div class="checkbox"> 
      <label for="other_support"> 
       <input type="checkbox" id="other_support" value="Other Support" v-model="selectedProducts">Other 
       <aside><small>Some helpful static content here</small></aside> 
      </label> 
      </div> 
     </div> 
     </div> 

    </section> 

    <section id="results"> 
     <span>Product types selected: {{selectedProducts}}</span> 

     <template v-for="product in selectedProducts"> 
     <div class="alert alert-info" v-if="(selectedOffice.inJira) && (product != '')">You are on the JIRA platform, go to this form.</div> 
     <div class="alert alert-warning" v-if="(!selectedOffice.inJira) && (product ==='Brief')">Fill out the Brief form here</div> 
     <div class="alert alert-danger" v-if="(!selectedOffice.inJira) && (product ==='Visual Consultation')">Fill out the Visual Consultation form here</div> 
     <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> 
     <div class="alert alert-success" v-if="(!selectedOffice.inJira) && (product ==='Other Support')">Send your request here</div> 
     <div class="alert alert-danger" v-if="product ==='Physical Model'">Order your physical model here</div> 
     </template> 

    </section> 

    </form> 

</div> 

JS：

var app = new Vue({ 
    el: '#app', 
    data: { 
    //testMessage: 'hello world', 
    selectedOffice: '', 
    selectedProducts: [], 
    officeList: [] 
    }, //data 
    created: function() { 
    //get API JSON data here 
    //data here for demo 
    this.officeList = [{ 
     code: "ABC", 
     inJira: true 
    }, { 
     code: "DEF", 
     inJira: false 
    }, { 
     code: "GHI", 
     inJira: true 
    }, { 
     code: "JKL", 
     inJira: false 
    }, { 
     code: "External", 
     inJira: false 
    }] 
    }, 
    methods: { 
    clearProductsSelection() { 
     return this.selectedProducts = []; 
    } 
    } 
}); 

注：我影響兩個產品類型相同的問題時，DEF的辦公室選定的：自定義靜態圖形支持和自定義動畫支持，但如果我能弄清楚如何解決上述問題，那麼我應該能夠修復後者。可能有更好的方式來編寫這個應用程序的邏輯 - 隨時提供任何改進建議，但我理解這可能更適合作爲另一個問題。

背景資料： 有一些辦事處（會有列表中的超過70個辦事處）使用一種稱爲JIRA項目管理跟蹤程序，而一些其他的辦事處不會是在該平臺上，並因此將需要發送到其他地方的常規PHP表單。我將根據哪個辦公室和哪些產品類型的組合檢查將用戶引導至各種形式。我還計劃使用CMS API通過JSON來管理數據模型

Answer 1

只是把這個JIRA警報的循環之外，更換product != ''與selectedProducts.length > 0

<div class="alert alert-info" v-if="(selectedOffice.inJira) && selectedProducts.length > 0">You are on the JIRA platform, go to this form.</div> 

https://jsfiddle.net/exunx9m1/86/