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 e out through console.log.. How to get both the value and the text when i click on the addFacilities?

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 e out through console.log.. How to get both the value and the text when i click on the addFacilities?

• javascript
• vue.js
• vuejs2

Share Improve this question Follow edited Aug 10, 2017 at 4:00 Phil 165k2525 gold badges262262 silver badges267267 bronze badges asked Aug 10, 2017 at 3:55 Maniraj MuruganManiraj Murugan 9,1042424 gold badges7676 silver badges122122 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

In Vue, your value can be a plex 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./[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./[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>