Несколько тернарных условий для атрибута тега в Vue
Пытаюсь написать несколько тернарных условий для атрибута в одном теге. Но vue выдает ошибку.
Хочу получить такое:
<a :href='(первое условие? действие, второе условие? действие, третье условие? действие): тут альтернатива если есть необходимость'>Ссылка</a>
Что я делаю: Есть переменная price=50;
<a :href="[price<50?'/files/40.pdf': '',price==50?'/files/50.pdf': '']:'/files/60.pdf'" ></a>
выдает ошибку на компиляцию и ругается на ":"
тогда сделал так
<a :href="[price<50?'/files/40.pdf',price==50?'/files/50.pdf']:'/files/60.pdf'" ></a>
такая же ошибка
тогда так
<a :href="[price<50?'/files/40.pdf': '',price==50?'/files/50.pdf': '',price>50?'/files/60.pdf': ''] ></a>
Тоже ошибка только на ","
не понимаю как это реализовать
Ответы (1 шт):
<a :href="price < 50 ? '/files/40.pdf' : price === 50 ? '/files/50.pdf' : '/files/60.pdf'"></a>
Если вы хотели такой результат. Вообще вложенные тернарники использовать это такое себе. К тому же, во vue есть computed
<a :href="link"></a>
computed: {
link() {
let fileName = 60;
if (this.price < 50) {
fileName = 40;
}
if (this.price === 50) {
fileName = 50;
}
return `/files/${fileName}.pdf`;
}
}