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

1 Answer 1

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>