I wanted to change <select> value getting ul > li value and use this value id on <select> v-model.
<div>
<select id="selected" @click="show-modal" v-model="subcategory_id">
<option></option>
</select>
</div>
<div class="modal">
<header class="modal-card-head">
<p class="modal-card-title">Choose category</p>
<button @click.prevent="close-modal" class="delete" aria-label="close"></button>
</header>
<section class="modal-card-body">
<div class="card ">
<ul class="cl-menu">
<li v-for="category in categories" :key="category.id" >
<a href="#">{{category.name}}
<ul>
<li @click="getLi(sub)" v-for="sub in category.subcategory" :key="sub.id">
<a class="px-2" href="#">{{sub.name}}</a>
</li>
</ul>
</li>
</ul>
</div>
</section>
</div>
Vuejs
getLi: function(e) {
const m = document.querySelector('.modal');
document.getElementById("selected").options[0].value = e.name;
m.classList.toggle('is-active')
console.log(e.name)
}
I am able to get value from list but cannot pass it to select value and value`s id to v-model.
Thanks in advance
Instead of manipulating the DOM as @Thomas said, you should make use of Vue's data binding:
new Vue({
el: '#app',
template: `<div><div>
<select id="selected" @click="show-modal" v-model="subcategory_id" disabled>
<optgroup v-for="category in categories" :key="category.id" :label="category.name">
<option v-for="sub in category.subcategory" :key="sub.id" :value="sub.id">
{{sub.name}}
</option>
</optgroup>
</select>
<button @click="openModal">Choose</button>
</div>
<div class="modal" v-if="showModal">
<header class="modal-card-head">
<p class="modal-card-title">Choose category</p>
<button @click.prevent="closeModal" class="delete" aria-label="close">×</button>
</header>
<section class="modal-card-body">
<div class="card ">
<ul class="cl-menu">
<li v-for="category in categories" :key="category.id" >
{{category.name}}
<ul>
<li @click="getLi(sub)" v-for="sub in category.subcategory" :key="sub.id">
<a class="px-2" href="#">{{sub.name}}</a>
</li>
</ul>
</li>
</ul>
</div>
</section>
</div></div>`,
data() {
return {
showModal: true,
subcategory_id: null,
categories: [{
name: 'A',
id: 1,
subcategory: [{
name: 'A.1',
id: 2
}]
}, {
name: 'B',
id: 3,
subcategory: [{
name: 'B.1',
id: 4
}]
}]
}
},
methods: {
getLi: function(subId) {
this.subcategory_id = subId.id
this.closeModal()
},
closeModal() {
this.showModal = false
},
openModal() {
this.showModal = true
}
}
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>