Javascript VueJS2：如果值相同，则选中复选框并切换元素可见性

我正在制作一个表格，其中包含不同办公室的下拉列表和复选框列表。根据下拉列表中选择的办公室，某些复选框的反应会有所不同。我一切都很好，您可以在JSFIDLE这里查看：

[]

然而，我的问题是：

在下拉列表中选择了“ABC”办公室，当您选中每个产品的复选框时（除了“物理模型”），我只需要显示一个“您在JIRA平台上，转到此表单”元素，而不是多个。如何编写代码，使多个“您在JIRA平台上，转到此表单”不显示

HTML:

注意：当选择OfficeofDEF时，我遇到了影响另外两种产品类型的相同问题：自定义静态图形支持和自定义动画支持，但如果我能找到解决上述问题的方法，那么我应该能够解决后者。可能有一种更好的方法来编写这个应用程序的逻辑——请随时提供任何改进建议，但我知道这可能更适合作为另一个问题

背景资料：

---

某些办公室（列表中有70多个办公室）使用名为JIRA的项目管理跟踪程序，而其他一些办公室不在该平台上，因此需要发送到其他地方的常规PHP表单。我将根据检查的办公室和产品类型组合，引导用户使用这些不同的表单。我还计划使用CMSAPI通过JSON管理数据模型，只需将此jira警报置于循环之外，并替换

产品！=''与
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>

您在JIRA平台上，请转到此表单。


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 = [];
    }
  }
});

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