vuejsのドロップダウンブートストラップメニュー

Question

チェックボックスのドロップダウンメニューを作成したいと思います。私が選択したものをconsole.logに表示する項目を1つ選択すると、私はvuejsを学ぶ過程にいます。また私はjsfiddleでいくつかの間違いを犯したと思うので、それは私に何も表示されていないのを見るからです。

これは、誰かが私に手をお願いできますか？リンクhttps://jsfiddle.net/johnkido/rzLebv8h/6/

ですか

HTMLは次のとおりです。

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

、スクリプトで：

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

要素uiからテストすることができ、オブジェクトを変更できることをお勧めします。これらのラインに

は、自分の価値観を置く：ここ

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

はjsfiddle

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

Answer 2

私が正しくあなたの目標を理解していれば、あなたは複数選択ドロップダウンをしたいです。

非常に良いvueコンポーネントがありますので、this（vue-js-dropdown）の使用を検討することをお勧めします。 この問題についてもう1つのdiscussionがあり、ソリューションはほぼ同じでした（ドロップダウンマルチセレクション）。