vue js에서 선택한 값 및 텍스트를 모두 가져오는 방법

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>

이벤트 클릭:

<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선택한 옵션의 출력으로만 작성console.log, 나는 둘 다 가질 필요가 있다.value뿐만 아니라text옵션에서 console.log를 통해 출력됩니다.둘 다 입수하는 방법value및 그text를 클릭하면addFacilities?

Vue의 경우value는 복잡한 오브젝트일 수 있습니다.

이 예에서 값은 텍스트와 값을 모두 포함하는 개체입니다.이 두 가지를 선택하면 다음에서 모두 사용할 수 있음을 알 수 있습니다.facilitySelected.

console.clear()


new Vue({
  el: "#app",
  data: {
    facilitySelected: []
  }
})

<script src="https://unpkg.com/vue@2.2.6/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/vue@2.2.6/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>

언급URL : https://stackoverflow.com/questions/45604178/how-to-get-both-value-and-text-from-select-in-vue-js