获取与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>