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

Question

[Rufix]

Имеется такой код:

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

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

Answer 1

[0xD34F]

Добавляете свойство, которое будет представлять выбранный пункт 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;
},

Comments

[Slava191]

v-for не потребует :key ?)

[Rufix]

Slava191, У меня eslint потребовал.

[Rufix]

Спасибо за решение.

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

Да, так действительно лучше. Еще раз спасибо.

p.s мне посоветовали поменять computed на methods, что лучше?

[0xD34F]

Slava191, не потребует. Могли бы и сами проверить.

Индекс в качестве key - хуже чем ничего. Само по себе бессмысленно, а у того, кто будет код читать, может создать иллюзию, будто бы key есть.

[0xD34F]

Rufix, вы таких вопросов больше не задавайте. Как можно определить какое решение лучше, если неизвестно, что за задача решается (нет, здесь об этом рассказывать не надо - можете оформить отдельный вопрос)?

Answer 2

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