Почему vue ломается или выводит предыдущее значение на v-if?

Question

Компонент для отрисовки элемента списка. В него прокинут через v-bind данные в переменную item.

Внутри шаблона есть проверки, чтобы вывести разный текст\картинку в зависимости от значения. Но случаются две ситуации:

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

Для первого случая применятся v-else-if, для второго просто третий v-else. Выглядит это так:

<div v-if="item.option_term === 0">Сегодня</div>
<div v-else-if="item.option_term === 1">Завтра</div>
<div v-else><% if item.option_term  %></div>

Или так же, но без v-else-if. Не понимаю почему так происходит, ведь v-else-if ввели еще в 2.1 версии. В принципе, можно решить через data и методы, где прокидывать данные в метод, что-то порешать, подставить по-умолчанию значение и выплюнуть значение нужное. Но хочется просто на шаблоне и понять чего не так-то?

Answer 1

У Вас ошибка в html (там где v-else). Думаю по этому у Вас и не работает.

Вот корректный html:

<div v-if="item.option_term === 0">Сегодня</div>
<div v-else-if="item.option_term === 1">Завтра</div>
<div v-else>{{ item.option_term }}</div>

БЛОГ НА HUSL

Почему vue ломается или выводит предыдущее значение на v-if?

Ответы (1 шт):