vue jsでselectからvalueとtextの両方を取得するには？

Question

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選択されたオプションのうち、出力をconsole.logにするだけで、両方が必要ですvalueとtextは、console.logから出力されるオプションになります。とtextの両方を取得するには、addFacilitiesをクリックしますか？

Answer 1

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>