如何根据一个元素显示正确的计算值？

Question

I have this "roi calculator" where the user can range some labels. And, I have one range called "onlineRevenue". The idea is offer the best plan according the onlineRevenue number.

But, to do this, I have limitations :

• If the onlineRevenue is less than 100 000, I offer the 'essentialYear';
• If the onlineRevenue is between 100 000 and 300 000, I offer the 'accelerateYear';
• If the onlineRevenue is between 300 000 and 500 000, I offer the 'Ultimate';

How I can add this limitations using vue to the variable "subscriptionFee" understand the rules above?

For example, someone suggest to use the direct numbers, without the data, like that

          subscriptionFee: function() {
          var feesuggest = this.onlineRevenue <=100000;
          return this.essentialYear;
        },

But the idea is generate a variable where the if the value is X, show that. And with this code above, I can't do comparison between values.

I create a jsfiddle to work with the code, to be more easier to understand my question.

Answer 1

How about a solution like so:

const tiers = [
    { name: 'essential', min: 0, max: 100000 },
    { name: 'accelerate', min: 100000, max: 300000 },
    { name: 'ultimate', min: 300000, max: 500000 }
];

const subscriptionFee = (amount) => {
  const tierMatch = (tier) => amount >= tier.min && amount < tier.max;
  const reducer = (tierFound, tier) => tierMatch(tier) ? tier : tierFound;
  return tiers.reduce(reducer, false);
};

subscriptionFee(500);

You start with an array of tiers over which you iterate and reduce to a single item. You still need to consider bigger numbers, because 500001 will give you false as a result.

Answer 2

subscriptionFee: function() {
  const x = this.onlineRevenue
  switch (true) {
    case (x <= 100000):
      return this.essentialYear
      break;
    case (x > 100000 && x < 300000):
      return this.accelerateYear
      break;
    default:
      // anything over 300000
      return this.ultimate
  }
}