# Precedência de v-if vs. v-for
breaking
# Visão Geral
- QUEBRA: Se usado no mesmo elemento,
v-if
terá uma maior precedência do quev-for
# Introdução
Duas das diretivas mais comumente usadas em Vue.js são v-if
e v-for
. Portanto, não é surpresa que chegue um momento em que os desenvolvedores desejem usar os dois juntos. Embora não seja uma prática recomendada, pode haver momentos em que isso seja necessário, por isso gostaríamos de fornecer orientações sobre como isso funciona.
# Sintaxe v2.x
Na v2.x, quando utilizado v-if
e v-for
no mesmo elemento, v-for
teria precedência.
# Sintaxe v3.x
Na v3.x, v-if
terá sempre uma maior precedência do que v-for
.
# Estratégia de Migração
Recomenda-se evitar o uso de ambos no mesmo elemento devido à ambiguidade da sintaxe.
Em vez de gerenciar isso à nível de template, um método para realizar isso é criar um dado computado (computed property) que filtre uma lista para os elementos visíveis.
Sinalizador na compilação de migração: COMPILER_V_IF_V_FOR_PRECEDENCE