Как показать первоначальную цену если нет скидки и показать цену скидки только если есть Vue.js


Как показать первоначальную цену если нет скидки и показать цену скидки только если есть Vue.js

24.09.2020 01:56:28 Просмотров 30 Источник

У меня есть массив таких объектов:

orders : [
{
          id: 1,
          image: require("./assets/imgs/product1.png"),
          originalPrice: 40,
          discountPrice: "",
          buyBtn: require("./assets/icons/buy.svg"),
          likeBtn: require("./assets/icons/like.svg"),
          productName: "Marianna Collection",
          productRating: "★★☆☆☆",
          class: "new"
        },
        {
          id: 2,
          
          image: require("./assets/imgs/product2.png"),
          originalPrice: 60,
          discountPrice: 30,
          buyBtn: require("./assets/icons/buy.svg"),
          likeBtn: require("./assets/icons/like.svg"),
          productName: "Marianna Collection",
          productRating: "★★☆☆☆",
          class: "new"
        },
]

Теперь то,что я хочу сделать, это показать только одну цену в моей корзине, поэтому я хочу сказать:

    if discountPrice ! = '' show discountPrice else show originalPrice

Вот что я попробовал:

<td class="tg-lqy6"   :class="order.discountPrice != '' ? 'exist' : ''" id="originalPrice">{{ order.originalPrice }} sr</td>
<td class="tg-lqy6"   :class="order.discountPrice != '' ? 'exist' : ''" id="discountPrice">{{ order.discountPrice }} sr</td>

и стилизовал его так:

#originalPrice.exist{
    display: none !important;
}
#discountPrice{
    display: none !important;   
}
#discountPrice.exist{
    display: block !important;
}

Это работает, но я хочу сделать это с помощью методов. Я хочу иметь переменную цены в данных, которая принимает значение цены, потому что я умножу ее на сумму, чтобы получить общую сумму, и я не могу сделать это с помощью этого кода.

У вопроса есть решение - Посмотреть?

Ответы - Как показать первоначальную цену если нет скидки и показать цену скидки только если есть Vue.js / How to show original price if there's no discount and show discount price only if there's Vue.js

Boussadjra Brahim

24.09.2020 02:02:40

Вы можете использовать условный рендеринг 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>
kako-jun

24.09.2020 02:12:22

Пожалуйста, используйте 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>

Вам не нужно ничего добавлять в CSS.

Нехорошо, если discountPrice имеет тип string или number. Начальное значение discountPrice должно быть -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>
Помочь в развитии проекта:
Закрыть X