獲取與VueJs選擇選項文本

Question

我有一個經典的<Select>輸入，我想獲取所選元素的文本。我能得到的價值，而不是文本：

<select v-model="ageCategory" class="form-control" @change="calculateCategoryName"> 
    <option value="0">{{trans('core.no_age')}}</option> 
    <option value="1">{{trans('core.children')}}</option> 
    <option value="2">{{trans('core.teenagers')}}</option> 
    <option value="3">{{trans('core.adults')}}</option> 
    <option value="4">{{trans('core.masters')}}</option> 
    <option value="5">{{trans('core.custom')}}</option> 
</select> 

我可以得到價值：

var ageCategory = this.ageCategory; 

但我不能讓文字...任何想法，我應該怎麼辦呢???

Answer 1

客戶端渲染選擇選項

因爲你的價值觀正好是從零開始的數字（0-5），你可以保持平移鍵在組件中的數組：

JS ：

：

data: { 
    ageCategory: 0, 
    ageValues: [ 
     'core.no_age', 
     'core.children', 
     'core.teenagers', 
     'core.adults', 
     'core.masters', 
     'core.custom' 
    ], 
}, 
methods: { 
    calculateCategoryName: function(event) { 
     var ageCategory = this.ageCategory; 
     var ageCategoryName = this.ageValues[this.ageCategory]; 
    } 
} 

然後你用v-for loop可以呈現出這些值

服務器端渲染選擇選項

如果你需要得到數值超出實際選擇的選項，你可以得到它通過DOM，using v-el：

methods: { 
    calculateCategoryName: function() { 
     var ageCategory = this.ageCategory; 
     var $ageCategorySelect = this.$els.ageCategory; 
     var ageCategoryOption = $ageCategorySelect.options[$ageCategorySelect.selectedIndex]; 
     var ageCategoryName = ageCategoryOption.text; 
    } 
} 

HTML：

<select v-model="ageCategory" class="form-control" @change="calculateCategoryName" v-el:age-category> 
    <option value="0">{{trans('core.no_age')}}</option> 
    <option value="1">{{trans('core.children')}}</option> 
    <option value="2">{{trans('core.teenagers')}}</option> 
    <option value="3">{{trans('core.adults')}}</option> 
    <option value="4">{{trans('core.masters')}}</option> 
    <option value="5">{{trans('core.custom')}}</option> 
</select>