How to Check if a value is within a range of numbers using Vue.js-CodePudding

I am creating a simple calculator which calculates the discount percentage when entering the price in the field, I have two different discount types.

If the price is in 10-90 range you get a 50%-discount.
If the price is in 100-900 range you get a 90%-discount.

Problem: When I am entering 100 in the input field both type is selected, my aim is to select only second type of discount.

Code SandBox

CodePudding user response：

You can pass discount to your method:

new Vue({
  el: '#demo',
  data() {
    return {
      price: "",
      cascadeSugg: [
        {
          id: 3,
          title: "10-90USD take 50% discount",
          min: 10,
          max: 90,
          discount: 50,
          created_at: "2021-10-28T03:04:33.000000Z",
          updated_at: "2021-10-28T03:41:49.000000Z",
          start_date: "2021-10-28",
          end_date: "2021-10-31",
        },
        {
          id: 4,
          title: "100-900USD take 90% discount",
          min: 100,
          max: 200,
          discount: 90,
          created_at: "2021-10-28T03:54:28.000000Z",
          updated_at: "2021-10-28T03:54:28.000000Z",
          start_date: "2021-10-28",
          end_date: "2021-10-31",
        },
      ],
    };
  },

  methods: {
    setActiveRange(min, max, disc) {
      let total = this.price;
      if(total && total <= 99 && total >= min) {
        return true
      } else if ((total && total >= 100 && disc > 50)) {
        return true;
      }
    },
  },
})

Vue.config.productionTip = false
Vue.config.devtools = false

#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.active {
  color: #F48245;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
    <div class="cascade-discount">
      <input type="text" v-model="price" />
      <div
        class="cascade-item"
        v-for="cascade in cascadeSugg"
        :key="cascade.id"
      >
        <p
          class="m-0"
          :class="{ active: setActiveRange(cascade.min, cascade.max, cascade.discount) }"
        >
          {{ cascade.title }}
        </p>
      </div>
    </div>
</div>

CodePudding user response：

Well, the problem is that setActiveRange function is working as you have written it - basically, it will return true every time the 'total > price' condition is fulfilled. Remove that part and it is gonna work. Code sample:

 methods: {
    setActiveRange(min, max) {
      let total = this.price;
      if (total && total >= min && total <= max) {
        return true;
      }
    }
  }

CodePudding user response：

You can use a simple if-else statement to check the range of the values

if(price => 10 && price <= 90){
//get 50% Discount
}else if(price => 100 && price <= 900){
//get 90%Discount
}