[英]Vue.js + get selected li item of ul
根据我的理解,这种方法不好,我不确定您为什么要使用<ul>
和<li>
而不是select
元素来构建下拉菜单,因为它是一个表单元素,并提供了一种更好的方法来获取选定的选项值v-model
指令的帮助。
无论如何,我按照您的要求工作并提出了解决方案。
var app = new Vue({ el: '.dropdown', data: { list: [{ id: 1, text: 'First Filter' }, { id: 2, text: 'First Filter 2021' }, { id: 3, text: 'Full Filter' }], selectedListItem: null }, methods: { create() { console.log('New filter Create Called'); }, getSelected (item) { this.selectedListItem = item; }, save() { if (this.selectedListItem) { console.log(this.selectedListItem); } else { console.log('No list option selected'); } } } })
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <div class="dropdown"> <input type="text" placeholder="Select Filter" class="dropdown-toggle" data-toggle="dropdown"/> <ul class="dropdown-menu"> <li v-on:click="create">Create New</li> <li v-for="item in list" :key="item.id" v-on:click="getSelected(item)">{{ item.text }}</li> </ul> <button @click="save">SAVE</button> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.