使用VueJs获取Select选项文本

get Select option text with VueJs

本文关键字：选项 文本 Select 获取 VueJs 使用      更新时间：2023-09-26

我有一个经典的<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;

但我无法收到短信。。。知道我该怎么做吗？？？

客户端渲染的选择选项

由于您的值恰好是从零开始的数字（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循环呈现这些值：

<select v-model="ageCategory" class="form-control" @change="calculateCategoryName">
    <option v-for="ageValue in ageValues" :value="$index">{{ trans(ageValue) }}</option>
</select>

服务器端渲染选择选项

如果您需要从实际的select选项中获取值，您可以使用v-el:通过DOM获取它

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>
相关文章：