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

#javascript #vue.js #vuejs2 #vue-component #dom-events

#javascript #vue.js #vuejs2 #vue-компонент #dom-события

Вопрос:

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

 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;
}

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

1. Не совсем понятно, чего вы хотите достичь. Не могли бы вы указать лучше? Старайтесь не смешивать числа со строками. Как сказал како-джун в ответе, лучше установить discountPrice = -1 или discountPrice = null аннулировать это свойство. В сравнении свойств класса тегов используйте: :class="order.discountPrice > -1 ? 'exist' : ''" или :class="order.discountPrice != null ? 'exist' : ''"

Ответ №1:

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

1. хорошо, отредактируйте это большое вам спасибо, я добавил решение, которое я попробовал, которое позволит мне рассчитать количество, которое вы можете проверить

2. @AhmedSarhan если ответ полезен, вы могли бы поддержать его, не нужно говорить спасибо

Ответ №2:

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

1. Не <td>{order.discountPrice||order.originalPrice}</td> сработает?

2. большое вам спасибо, я добавил решение, которое я попробовал, которое позволит мне рассчитать количество, которое вы можете проверить

3. был ли мой ответ полезным?

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