Quería cambiar el valor <select> obteniendo el valor ul > li y usar este ID de valor en <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) } Puedo obtener valor de la lista, pero no puedo pasarlo para select el valor y la identificación del valor a v-model. Gracias por adelantado
En lugar de manipular el DOM como dijo @Thomas, debe utilizar el enlace de datos de Vue:
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>