get Выберите текст опции с VueJs

87
8

У меня есть классический вход <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;

Но я не могу получить текст... Любая идея, как мне это сделать???

спросил(а) 2016-04-16T00:13:00+03:00 5 лет назад
1
Решение
76

Варианты выбора на стороне клиента

Поскольку ваши значения являются нулевыми числами (от 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>

Варианты выбора на стороне сервера

Если вам нужно получить значение вне фактического выбора, вы можете просто получить его через DOM, используя 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>

ответил(а) 2016-04-16T00:45:00+03:00 5 лет назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема