Vì sao không nên đặt `v-if` và `v-for` trên cùng một thẻ? Viết lại thế nào cho đúng?

Vì trong Vue 3, v-if có độ ưu tiên cao hơn v-for — điều kiện được đánh giá trước, nên nó không nhìn thấy biến của vòng lặp.

Đoạn dưới ném lỗi vì user chưa tồn tại ở thời điểm v-if chạy:

<!-- wrong: `user` is not defined yet -->
<li v-for="user in users" v-if="user.isActive" :key="user.id">
  {{ user.name }}
</li>

Hai cách sửa:

<!-- 1. filter in a computed (preferred) -->
<li v-for="user in activeUsers" :key="user.id">{{ user.name }}</li>

<!-- 2. wrap with <template v-for> and put v-if inside -->
<template v-for="user in users" :key="user.id">
  <li v-if="user.isActive">{{ user.name }}</li>
</template>

Cách 1 tốt hơn về hiệu năng: computed được cache, danh sách lọc chỉ tính lại khi users đổi, còn đặt v-if trong vòng lặp thì mỗi lần re-render đều duyệt toàn bộ phần tử.

Lưu ý :key phải gắn vào phần tử thật sự lặp — với <template v-for> thì :key nằm trên <template>.