Как получить значение и текст из select в vue js?

Question

Как получить значение и текст из select в vue js?

1

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:

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

Автор сценария:

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

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

Здесь у меня есть список выбора с параметрами. Когда я нажимаю на addFacilities, value выбранного параметра, addFacilities только как результат в console.log, мне нужно иметь как value так и text в опции, чтобы выйти через console.log.. Как получить и value и text когда я нажимаю на addFacilities?

Mani Raj 10 авг. 2017, в 06:44

Источник

Теги:

javascript

vue.js

vuejs2

1 ответ

Ещё вопросы

Bert · Answer 1 · 2017-08-10T02-06-00.000Z

В Vue ваше value может быть сложным объектом.

В этом примере значения представляют собой объект, содержащий как текст, так и значение. Когда они будут выбраны, вы увидите, что у вас есть оба доступных 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>

Но вы можете сделать это проще и не повторяться, сохраняя свои параметры в данных.

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>