VueJS2: Checkboxes and toggling element visibility if the same value

Question

I am working on a form that contains a drop down list of different offices and a list of checkboxes. Depending on which office is selected in the drop down, certain checkboxes are going to react differently. I got everything working good and you can check it out at JSFIDDLE here:

[ JSFIDDLE ]

However, here's my issue:

With the office of "ABC" selected in the drop down, and when you check the boxes for each product (with the exception of "Physical Model"), I need to only show ONE "You are on the JIRA platform, go to this form" element, not multiple. How can I write the code so that multiple "You are on the JIRA platform, go to this form" are not shown?

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

Note: I have the same issue affecting two more product types when the office of DEF is selected: Custom Static Graphic Support and Custom Animation Support, but if I can figure out how to solve the above issue, then I should be able to fix the latter. There is probably a better way to write the logic for this application -- feel free to offer any suggestions on improvements, but I understand that's probably more appropriate as another question.

Background information: There are certain offices (there will be over 70+ offices in the list) using a project management tracking program called JIRA, whereas, some other offices are not going to be on that platform and will thus need to be sent to a regular PHP form elsewhere. I'll be directing users to those various forms depending on which office and a combination of which product types are checked. I also plan to use a CMS API to manage the data model via JSON

Answer 1

just put this jira alert outside of the loop and replace product != '' with 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/