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 >
    <header >
        <p >Choose category</p>
        <button @click.prevent="close-modal"  aria-label="close"></button>
    </header>
    <section >
        <div >
             <ul >
                  <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  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

CodePudding user response：

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  v-if="showModal">
    <header >
        <p >Choose category</p>
        <button @click.prevent="closeModal"  aria-label="close">&times;</button>
    </header>
    <section >
        <div >
             <ul >
                  <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  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>