FRONTEND_1 Telegram 3962
🔥 Vue: тонкий нюанс с v-if и v-for

Если используешь v-if и v-for на одном и том же элементе — осторожно! Порядок важен 👇


<!-- ⚠️ Антипаттерн -->
<li v-for="item in items" v-if="item.visible">
{{ item.name }}
</li>


Такой код неэффективен: v-if не влияет на v-for — Vue сначала рендерит все элементы, а потом фильтрует по v-if.

Лучше так:

<li v-for="item in visibleItems">
{{ item.name }}
</li>


А в computed:

computed: {
visibleItems() {
return this.items.filter(item => item.visible);
}
}


💡 Это улучшит производительность и избавит от неожиданных багов при больших списках.

Подробнее — в оф. доках:
https://vuejs.org/guide/essentials/list.html#v-for-with-v-if

👉 @frontend_1



tgoop.com/frontend_1/3962
Create:
Last Update:

🔥 Vue: тонкий нюанс с v-if и v-for

Если используешь v-if и v-for на одном и том же элементе — осторожно! Порядок важен 👇


<!-- ⚠️ Антипаттерн -->
<li v-for="item in items" v-if="item.visible">
{{ item.name }}
</li>


Такой код неэффективен: v-if не влияет на v-for — Vue сначала рендерит все элементы, а потом фильтрует по v-if.

Лучше так:

<li v-for="item in visibleItems">
{{ item.name }}
</li>


А в computed:

computed: {
visibleItems() {
return this.items.filter(item => item.visible);
}
}


💡 Это улучшит производительность и избавит от неожиданных багов при больших списках.

Подробнее — в оф. доках:
https://vuejs.org/guide/essentials/list.html#v-for-with-v-if

👉 @frontend_1

BY Frontend разработчик




Share with your friend now:
tgoop.com/frontend_1/3962

View MORE
Open in Telegram


Telegram News

Date: |

How to create a business channel on Telegram? (Tutorial) ‘Ban’ on Telegram fire bomb molotov November 18 Dylan Hollingsworth yau ma tei For crypto enthusiasts, there was the “gm” app, a self-described “meme app” which only allowed users to greet each other with “gm,” or “good morning,” a common acronym thrown around on Crypto Twitter and Discord. But the gm app was shut down back in September after a hacker reportedly gained access to user data. Healing through screaming therapy
from us


Telegram Frontend разработчик
FROM American