CODEWITHSUNDEEP
javascriptvue.jsvuejs2
Maniraj Murugan
Maniraj Murugan

Reputation: 9084

How to get both value and text from select in vue js?

Html:

<select v-model="facilitySelected" name="facilities" multiple="multiple" id="facilities" size="4" class="form-control">
  <option value="1">Double (Non a/c)</option>
  <option value="2">Premium Double (a/c)</option>
  <option value="3">Standard Double (a/c)</option>
</select>

Click event:

<a @click="addFacilities" class="btn btn-default add_option" rel="facilities2" id="add"><i class="fa fa-arrow-right"></i></a>

Script:

export default {
  data(){
            return{
                facilitySelected:[]
            }
  }

  methods: {
      addFacilities() {
        this.facilitySelected;
        console.log(this.facilitySelected);
      }
  }
}

Here i have a list of select with options, When i click on the addFacilities, the value of the selected option only making as output in console.log, i need to have both value as well as the text in the option to be come out through console.log.. How to get both the value and the text when i click on the addFacilities?

Upvotes: 4

Views: 3777

Answers (1)

Bert
Bert

Reputation: 82459

In Vue, your value can be a complex object.

In this example, the values are an object holding both the text and the value. When they are selected, you can see you have both available in facilitySelected.

console.clear()


new Vue({
  el: "#app",
  data: {
    facilitySelected: []
  }
})
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app">
  <select v-model="facilitySelected" name="facilities" multiple="multiple" id="facilities" size="4" class="form-control">
  <option :value="{value: 1, text:'Double (Non a/c)'}">Double (Non a/c)</option>
  <option :value="{value: 2, text:'Premium Double (a/c)'}">Premium Double (a/c)</option>
  <option :value="{value: 3, text:'Standard Double (a/c)'}">Standard Double (a/c)</option>
</select>
  <hr> Selected: {{facilitySelected}}
</div>

But you can make this easier and avoid repeating yourself by storing your options in data.

console.clear()


new Vue({
  el: "#app",
  data: {
    facilitySelected: [],
    options: [{
        value: 1,
        text: 'Double (Non a/c)'
      },
      {
        value: 2,
        text: 'Premium Double (a/c)'
      },
      {
        value: 3,
        text: 'Standard Double (a/c)'
      }
    ]
  }
})
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app">
  <select v-model="facilitySelected" name="facilities" multiple="multiple" id="facilities" size="4" class="form-control">
  <option v-for="option in options" :value="option">{{option.text}}</option>
</select>
  <hr> Selected: {{facilitySelected}}
</div>

Upvotes: 6

Related Questions