@Rufix

Select/option во Vue computed. Как использовать?

Имеется такой код:
<select id="input__select">
   <option v-for="(item, index) in options" :value="item.value" :key="index" 
    @change="getMonthRate(item.value)">
            {{ item.title }}
   </option>
</select>


computed: {
    // месячная ставка (для перевода процентной ставки из годовой в месячную)
    getMonthRate (value) {
      if (value === 'year') {
        return this.percent / 12 / 100
      } else if (value === 'month') {
        return this.percent / 100
      } else {
        return 0
      }
    }
}

Суть в том, что нужно, чтобы в зависимости от выбранной опции, функция срабатывала по разной формуле.
  • Вопрос задан
  • 781 просмотр
Решения вопроса 2
0xD34F
@0xD34F Куратор тега Vue.js
Добавляете свойство, которое будет представлять выбранный пункт select'а. Вместо метода getMonthRate делаете вычисляемое свойство:

<select v-model="selected">
  <option v-for="item in options" :value="item.value">
    {{ item.title }}
  </option>
</select>

data: () => ({
  selected: null,
  ...
}),
computed: {
  monthRate() {
    if (this.selected === 'year') {
      return this.percent / 12 / 100;
    } else if (this.selected === 'month') {
      return this.percent / 100;
    } else {
      return 0;
    }
  },
},

UPD.

нужно, чтобы в зависимости от выбранной опции, функция срабатывала по разной формуле

А насколько разной? То, что есть сейчас, можно значительно упростить: в качестве value вместо строк будут числа, напрямую подставляемые в формулу - 1/12 для year, 1 для month, 0 для остальных. Тогда вычисляемое свойство станет гораздо короче:

monthRate() {
  return this.percent * this.selected / 100;
},
Ответ написан
@Slava191
<select v-model="selectedValue">
   <option v-for="(item, index) in options" :value="item.value" :key="index">
            {{ item.title }}
   </option>
</select>


data:{
selectedValue:""
},
computed: {
    // месячная ставка (для перевода процентной ставки из годовой в месячную)
    getMonthRate: function () {
      //Здесь настоятельно рекомендую переделать в switch-case
      if (this.selectedValue === 'year') {
        return this.percent / 12 / 100
      } else if (this.selectedValue  === 'month') {
        return this.percent / 100
      } else {
        return 0
      }
    }
}
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы