[Vuejs]-How to change <select> value on Vuejs3?

by

0👍

✅

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">&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>

Leave a comment