如何在 Vuejs3 上更改 <select> 值？

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

我能够从列表中获取值，但无法将其传递给 select 值，并且无法将值的 ID 传递给 v-model。提前致谢

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>

如何在 Vuejs3 上更改 <select> 值？

How to change <select> value on Vuejs3?

html

javascript

vue.js

vuejs3