vuejs中的下拉引导菜单

我想创建一个复选框下拉引导菜单。当我选择一个项目以显示我在console.log中选择的内容时。我正在学习vuejs的过程。另外我想我在jsfiddle上犯了一些错误，因为我发现这并没有显示任何东西。vuejs中的下拉引导菜单

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

来源

2017-09-22 John Smith

不要引导需要的jQuery？是boostrap.js就够了吗？顺便说一句在jsfiddle中的控制台有一个错误消息 – LakiGeri

我添加了jquery，但仍然无法正常工作：https://jsfiddle.net/johnkido/rzLebv8h/8/ –

我建议你从元素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/

来源

2017-09-22 12:39:24 dragon

如果我正确理解你的目标，你想多选下拉列表。

有一个很好的vue组件，我建议你考虑使用this（vue-js-dropdown）。还有一个关于这个问题的discussion，和解决方案几乎相同（下拉多选）。

来源

2017-09-22 11:45:18 LakiGeri

vuejs中的下拉引导菜单

回答

相关问题