get Select option text with VueJs

Question

I have a classic <Select> input, and I want to get the text of the selected element. I am able to get the value, but not the text:

<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>

I can get value with :

var ageCategory = this.ageCategory;

But I can't get text... Any idea how should I do it???

nils · Accepted Answer · 2016-04-15 22:17:32Z

2

Client-side rendered select options

Since your values happen to be zero-based numbers (0 through 5), you could keep the translation keys in an array in the component:

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];
    }
}

Then you can render out those values using a v-for loop:

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

Server-side rendered select options

If you need to get the value out of the actual select option, you can just get it through the 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>

edited Apr 15, 2016 at 22:17

answered Apr 15, 2016 at 21:45

nils

27.4k6 gold badges73 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Juliatzin Over a year ago

is it a way to define ageValues in HTML? Thing is {{ trans('core.no_age'}} is a blade laravel directive who doesn't work out of a .blade.php file :(

nils Over a year ago

I see. Have a look at the edit above. Does this help?

Juliatzin Over a year ago

yes a lot! Can you explain the variable $index and $els. You are binding the option value to $index but I don't know what it means

nils Over a year ago

You can ignore the $index part if you render it via the server (it is only relevant for v-for loops). $els allows you to reference DOM elements in your components that you define with the directive v-el:.... See: vuejs.org/api/#v-el

nils Over a year ago

It takes a moment to get used to, just like any framework. Just keep going :) Best of luck.

|

Collectives™ on Stack Overflow

get Select option text with VueJs

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related