CODEWITHSUNDEEP
javascriptvue.jsnuxt.js
munirot
munirot

Reputation: 117

How to get value of v-model in select option

I want to do action on Submit button according to the selection (Reply or Reject) but I can't get the value either Reply or Reject, how to do it?

<select class="dropdown">
   <option value=""><label>- Select -</label></option>
   <option value="Reply" v-model="Reply_User">Reply</option>
   <option value="Reject" v-model="Reject_User">Reject</option>
</select>
</div>

<div id="app" class="reply_report">
   <div class="reply_send">
      <b @click="submit"> Send </b>
</div>

Upvotes: 1

Views: 4659

Answers (1)

Yahiya
Yahiya

Reputation: 791

Instead of giving a v-model to option tag set v-model on the select tag. This may work for you.

new Vue({
  el: "#app",
  data: {
    select: ''
  },
  methods: {
    submit(){
        console.log(this.select)
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
    <select class="dropdown" v-model="select">
       <option value=""><label>- Select -</label></option>
       <option value="Reply">Reply</option>
       <option value="Reject">Reject</option>
    </select>
    
    <div id="app" class="reply_report">
       <div class="reply_send">
          <button @click="submit"> Send </button>
      </div>
    </div>
</div>

Upvotes: 3

Related Questions