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

Question

[DPS_ninja]

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

Answer 1

[Дмитрий Беляев]

так же читал, что 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>

Comments

[DPS_ninja]

спасибо

Answer 2

[Alex]

Использовать 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>