vuejs2 - Conditional operator less than is not working in Vuejs

Question

i have an issue with less than operator in vuejs. what i want is:

if original price is 10 and discount price 200, then the result (discount_price) should not be displayed, 
else show the discount_price

The code doesn't seem to work. Here is the code: HTML:

        <div v-if="original_price > discount_price">
            <span class="price-info mr-2">
              {{ original_price | numeral('0,0') }}
            </span>
            <span>
                {{ Number((original_price - discount_price) / original_price) * 100 + '%' }}
            </span>
        </div>

Please assist

question from:https://stackoverflow.com/questions/66057845/conditional-operator-less-than-is-not-working-in-vuejs

Answer 1

Your v-if condition is not in the appropriate tag. It should be in the span of discount. Working demo below:

new Vue({
  el: '#app',
  data() {
    return {
      original_price: 10,
      discount_price: 20
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id='app'>
  <span class="price-info mr-2">
                  {{ original_price | numeral('0,0') }}
     </span>
  <span v-if="original_price > discount_price">
     {{ Number((original_price - discount_price) / original_price) * 100 + '%' }}
      </span>
</div>