Vue.js + 獲取 ul 的選定 li 項

Question

我有一個像下拉列表一樣顯示的列表-

除了“創建新過濾器”之外的每個項目都綁定到一個鍵，因此我可以唯一地識別 li 項目。

我想知道如何在保存時獲取選定的 li 項目並進行相應的操作

什么是好的方法，所以我可以理解何時單擊“創建新過濾器”或選擇其他 li 項目

下面是代碼 -

 <ul>
     <li v-on:click="create">Create New</li>
     <li v-for="item in list" :key="item.id" v-on:click="Change(item.id,item.text)">{{ item.text }}</li>
</ul>

Answer 1

根據我的理解，這種方法不好，我不確定您為什么要使用<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>