Vue formulate computed property not breaking out of loop

Question

I am fairly new to Vue and trying to use a computed property with the code below:

https://codepen.io/jason123456/pen/BazpMZd

Select the Traditional size from the drop down and then increase the quantity from 1 to 2.

When quantity is 2 the price should display as $2 as quantity is < 100, however it's picking up the 2nd index in the array and doing 2 * 5 = $10.

It's like the break statement is being skipped.

I have tested the computeCalendarPrice() function seperately and cannot see a problem in the logic if I call it outside of Vue, so I think I have got the reactivity piece wrong perhaps.

Would really appreciate some help!

Answer 1

Seems computeCalendarPrice function is not correct, look in the if statement. it is checking string values. you need to convert them to an integer.

for (var i = 0; i < arr.length; i++) {
    if (Number(values.calendar_qty) <= Number(arr[i])) {
      price = range[arr[i]];
      break;
    }
  }