JSFiddle - React, Tailwind, and code Playground

by John Smith

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/popper.js"></script>
 <div class="form-group">
  <label for="visitors">VISITORS</label>
  <div class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" 
      aria-expanded="false" 
      style="padding: 0" 
      id="dropdownMenuButton"
      data-toggle="dropdown"></a>
       <ul class="dropdown-menu"  @change="locationsDropdown" >
        <li v-for="visitor in visitors">
          <a href="#" 
            :value="visitor.rid" >
            <input  type="checkbox"  
              v-model="newEvent.rid"/>&nbsp;
              {{visitor.firstName}} {{visitor.lastName}}
          </a>
        </li>
    </ul>
  </div>
</div>

JavaScript

export default {
	data() {
  	return {
    	newEvent: {
      	rid:
      }
    	visitors: [{
        rid: 1,
      	firstName: 'Geo',
        lastName: 'daSilva'
      },
      {	
      	rid: 2,
      	firstName: 'John',
        lastName: 'Smith'
      }]
    }
  },
  methods: {
  	locationsDropdown() {
        var options = [];
        $('.dropdown-menu a').on('click', function(event) {
           var $target = $(event.currentTarget),
               val = $target.attr('value'),
               $inp = $target.find('input'),
               idx;
           if ((idx = options.indexOf(val)) > -1) {
              options.splice( idx, 1 );
              setTimeout(() => {$inp.prop('checked', false)}, 0);
           } else {
              options.push( val );
              setTimeout(() => {$inp.prop('checked', true)}, 0);
           }
           $(event.target).blur();
           console.log( options );
           return false;
        });
      },
  }
}