0
284
VisualizaçõesVue.js + get selected li item of ul
I have a list displayed like a dropdown -
Each of the items except 'Create New Filter' is bound to a key so i can uniquely identify the li items.
I want to know how can i get the selected li item on save and do operations accordingly
What would be the good approach for this so i can understand when 'Create new filter' is clicked or when other li items are selected
Below is the code -
<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>
·
Santiago Gelvez
1 Respostas
Responde à pergunta0
As per my understanding this approach is not good, I am not sure why you are building dropdown by using <ul> and <li> instead of select element as it is a form element and provide a better way to get the selected option value by the help of v-model directive.
Anyhow I worked as per your requirement and came up with the solution.
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>
·
Santiago Gelvez
Relatório
Responde à pergunta