@DPS_ninja

Как сделать правильно v-if при v-for во vue?

Я хотел бы сделать условие, допустим когда имя Tom или Misha, то добавлять ему допустим цифру 9. Чтобы получался список, но при моём условие было Tom 9, Alex, Vasya, Misha 9. Как это можно реализовать? так же читал, что v-for нельзя использовать с v-if
Пример:
https://codepen.io/Unknown322/pen/zYOVMPw
  • Вопрос задан
  • 80 просмотров
Решения вопроса 2
bingo347
@bingo347
Бородатый программер
так же читал, что v-for нельзя использовать с v-if
не рекомендуется не значит нельзя, рекомендуется делать .filter на массиве, а уже по отфильтрованному массиву делать v-for и связано это с тем, что vue может закэшировать отфильтрованный массив и пересчитывать циклы только при изменении самого массива, но не реагировать на изменение элементов в нем.

по сабжу:
<li v-for="user in users"
    :key="user"
>
    <p>Имя: {{ user }}{{ user === 'Tom' || user === 'Misha' ? ' 9' : '' }}</p>
</li>
Ответ написан
Kozack
@Kozack
Использовать v-for с v-if можно, но не рекомендуется.
При их сочетании условие применяется к каждой итерации.
<div v-for="i in index" v-if="index > 10">
Аналог
for(let i in index) {
    if (i > 10) { /* ... */ }
}


Прочитайте Это и Это

А конкретно в вашем примере достаточно сделать вот так:
<p>Имя: {{ user }}{{user === 'Tom' || user === 'Misha' ? 9 : ''}}</p>

Или отдельным елементом:
<p>Имя: {{ user }} <span v-if="user === 'Tom' || user === 'Misha'">9</span></p>
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Enapter Санкт-Петербург
от 160 000 до 240 000 ₽
Ready for Sky Санкт-Петербург
от 120 000 до 160 000 ₽