0
283
VistasVue.js + obtener el elemento li seleccionado de ul
Tengo una lista que se muestra como un menú desplegable:
Cada uno de los elementos, excepto 'Crear nuevo filtro', está vinculado a una clave para que pueda identificar de forma única los elementos li.
Quiero saber cómo puedo obtener el elemento li seleccionado al guardar y hacer las operaciones correspondientes
¿Cuál sería el mejor enfoque para esto para que pueda entender cuándo se hace clic en 'Crear nuevo filtro' o cuando se seleccionan otros elementos li?
A continuación se muestra el código -
<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>1 Respuestas
Responde la pregunta0
Según tengo entendido, este enfoque no es bueno, no estoy seguro de por qué está creando un menú desplegable usando <ul> y <li> en lugar de select un elemento, ya que es un elemento de formulario y proporciona una mejor manera de obtener el valor de la opción seleccionada al la ayuda de la directiva v-model .
De todos modos, trabajé según sus requisitos y se me ocurrió la solución.
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>