twitter bootstrap - modal - Menú desplegable de arranque en vuejs

vue table component

Question

Quiero hacer un menú desplegable de la casilla de verificación. Cuando selecciono un elemento para mostrarme en console.log lo que seleccioné. Estoy en el proceso de aprender vuejs. También creo que cometí algunos errores en jsfiddle porque veo que no me muestra nada.

Este es el enlace https://jsfiddle.net/johnkido/rzLebv8h/6/

¿Alguien puede darme una mano?

El HTML es:

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

Y en el guion:

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;
        });
      },
  }
}

Answer 1

Si entiendo tus objetivos correctamente, quieres un menú desplegable de selección múltiple.

Hay un muy buen componente vue para eso, te recomiendo que consideres el uso de esto (vue-js-dropdown). Hay otra discusión sobre este problema, y ​​la solución fue casi la misma (menú múltiple desplegable).

Answer 2

Te recomiendo que selecciones del elemento ui para que puedas probarlo y tenga un objeto, que puedes cambiarlo.

En estas líneas, pon tus valores:

<el-select v-model="newEvent.rid" multiple placeholder="Select">
<el-option v-for="visitor in visitors" 
  :label="visitor.firstName +'' ''+ visitor.lastName" 
  :value="visitor.rid">

Aquí está el jsfiddle

http://jsfiddle.net/johnkido/3ra1jscx/9/