[Vuejs]-How to show original price if there's no discount and show discount price only if there's Vue.js

by

2👍

You could use conditional rendering v-if/v-else :

<td class="tg-lqy6" v-if="order.discountPrice === ''"  >{{ order.originalPrice }} sr</td>
<td class="tg-lqy6" v-else  >{{ order.discountPrice }} sr</td>

2👍

Please use v-if.

<td class="tg-lqy6" v-if="order.discountPrice !== ''" id="discountPrice">{{ order.discountPrice }} sr</td>
<td class="tg-lqy6" v-else id="originalPrice">{{ order.originalPrice }} sr</td>

You don’t need to add anything to the CSS.

It is not good for discountPrice to be of type string or number.
The initial value of discountPrice should be -1.

<td class="tg-lqy6" v-if="order.discountPrice >= 0" id="discountPrice">{{ order.discountPrice }} sr</td>
<td class="tg-lqy6" v-else id="originalPrice">{{ order.originalPrice }} sr</td>

Leave a comment