如何改变<select>Vuejs3 的价值？

Question

我想更改<select>值以获取ul > li值并在<select> v-model 上使用此值 ID。

<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)
}

我能够从列表中获取值，但不能将它传递给 v-model select值和值的 id。 提前致谢

Answer 1

与其像@Thomas 所说的那样操作 DOM，不如使用 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">&times;</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>