Vue.js: العرض الشرطي والقوائم

<!-- ❌ The "Broken" Version:v-if Nested Hell -->
<template>
 <div v-if="user">
 <div v-if="user.isAdmin">
 <div v-if="orders.length > 0">
 <div v-if="!isLoading">
 <div v-if="!hasError">
 <!-- Content is finally displayed -->
 <p>Orders: {{ orders.length }}</p>
 </div>
 <div v-else>Error: {{ errorMsg }}</div>
 </div>
 <div v-else>Loading...</div>
 </div>
 <div v-else>No orders</div>
 </div>
 <div v-else>Not admin</div>
 </div>
 <div v-else>Please login</div>
</template>

<template>
 <div v-if="!user">Please login</div>
 
 <div v-else-if="!user.isAdmin">Not admin</div>
 
 <div v-else-if="isLoading">Loading...</div>
 
 <div v-else-if="hasError">Error: {{ errorMsg }}</div>
 
 <div v-else-if="orders.length === 0">No orders</div>
 
 <div v-else>
 <p>Orders: {{ orders.length }}</p>
 <OrderList :orders="orders" />
 </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps(['user', 'orders', 'isLoading', 'hasError', 'errorMsg'])

// Flatten 5 conditions (v-else-if chain)
</script>

<template>
 <!-- Single condition -->
 <p v-if="isVisible">Visible</p>
 
 <!-- Choose one of the two -->
 <p v-if="score >= 60">Passed</p>
 <p v-else>Failed</p>
 
 <!-- Choose one or more -->
 <p v-if="type === 'A'">Type A</p>
 <p v-else-if="type === 'B'">Type B</p>
 <p v-else-if="type === 'C'">Type C</p>
 <p v-else>Unknown</p>
</template>

<template>
 <!-- template:Grouping Multiple Elements,Do not render DOM -->
 <template v-if="isAdmin">
 <h1>Admin Dashboard</h1>
 <p>Welcome, {{ user.name }}</p>
 <button>Edit</button>
 </template>
 
 <!-- Does not render template element (Savings 1 DOM layer) -->
</template>

<template>
 <!-- v-if: When conditions are false, Elements removed from DOM -->
 <p v-if="show">v-if</p>
 <!-- show=false: The element does not exist in DOM -->
 
 <!-- v-show: When conditions are false, display: none -->
 <p v-show="show">v-show</p>
 <!-- show=false: <p style="display: none">v-show</p> -->
</template>

// Switch Occasionally(If you are logged in/Not logged in)→ v-if
<div v-if="isLoggedIn">Welcome, {{ user.name }}</div>
<div v-else>Please login</div>

// Frequent switching (e.g. tab switch) → v-show
<button v-show="isActive">Active</button>
<button v-show="!isActive">Inactive</button>

<template>
 <!-- Basic Iteration -->
 <ul>
 <li v-for="item in items" :key="item.id">
 {{ item.name }}
 </li>
 </ul>
 
 <!-- Indexed -->
 <ul>
 <li v-for="(item, index) in items" :key="item.id">
 {{ index + 1 }}. {{ item.name }}
 </li>
 </ul>
</template>

<script setup>
import { ref } from 'vue'
const items = ref([
 { id: 1, name: 'Apple' },
 { id: 2, name: 'Banana' },
 { id: 3, name: 'Cherry' }
])
</script>

<template>
 <ul>
 <li v-for="(value, key, index) in user" :key="key">
 {{ index + 1 }}. {{ key }}: {{ value }}
 </li>
 </ul>
</template>

<script setup>
import { reactive } from 'vue'
const user = reactive({
 name: 'Alice',
 age: 25,
 email: 'alice@example.com'
})
// Output:1. name: Alice 2. age: 25 3. email: alice@example.com
</script>

<template>
 <!-- Rendering 1 to 10 -->
 <span v-for="n in 10" :key="n">{{ n }}</span>
 <!-- Output:12345678910 -->
</template>

<template>
 <!-- One character per line span -->
 <span v-for="char in 'Hello'" :key="char">{{ char }}</span>
 <!-- Output:H e l l o -->
</template>

<template>
 <!-- ❌ None :key(Vue Use by default index) -->
 <li v-for="item in item">{{ item.name }}</li>
 
 <!-- ✅ Has :key (Use "unique" id) -->
 <li v-for="item in item" :key="item.id">{{ item.name }}</li>
</template>

<!-- ✅ Recommendations:The Only One ID -->
<li v-for="user in users" :key="user.id">

<!-- ✅ Second choice:Unique Field(Email,Mobile phone number, etc.)-->
<li v-for="user in users" :key="user.email">

<!-- ❌ Avoid:index(When the data changes, the alignment is off.)-->
<li v-for="(user, index) in users" :key="index">

<!-- ❌ Never, under any circumstances:random()(Every render is different,Forced Rebuild)-->
<li v-for="user in users" :key="Math.random()">

import { ref, computed } from 'vue'

const items = ref([
 { id: 1, name: 'iPhone', price: 999, category: 'phone' },
 { id: 2, name: 'MacBook', price: 2499, category: 'laptop' },
 { id: 3, name: 'iPad', price: 599, category: 'tablet' }
])

const searchQuery = ref('')
const selectedCategory = ref('all')
const sortBy = ref('price') // 'price' / 'name'

// Filter + Sort(computed Automatic Caching)
const filteredItems = computed(() => {
 let result = items.value
 
 // 1. Filter by search term
 if (searchQuery.value) {
 result = result.filter(item =>
 item.name.toLowerCase().includes(searchQuery.value.toLowerCase())
 )
 }
 
 // 2. Filter by Category
 if (selectedCategory.value !== 'all') {
 result = result.filter(item => item.category === selectedCategory.value)
 }
 
 // 3. Sort
 result = [...result].sort((a, b) => {
 if (sortBy.value === 'price') return a.price - b.price
 if (sortBy.value === 'name') return a.name.localeCompare(b.name)
 return 0
 })
 
 return result
})

const currentPage = ref(1)
const pageSize = ref(10)

// Data after pagination
const paginatedItems = computed(() => {
 const start = (currentPage.value - 1) * pageSize.value
 return filteredItems.value.slice(start, start + pageSize.value)
})

// Total Number of Pages
const totalPages = computed(() =>
 Math.ceil(filteredItems.value.length / pageSize.value)
)

<template>
 <!-- 1. v-if:Conditional Rendering(Not here DOM) -->
 <p v-if="show">v-if</p>
 
 <!-- 2. v-show:display none(Always there DOM) -->
 <p v-show="show">v-show</p>
 
 <!-- 3. v-else-if:Chained Conditions -->
 <p v-if="type === 'A'">A</p>
 <p v-else-if="type === 'B'">B</p>
 <p v-else>C</p>
 
 <!-- 4. v-if + template:Multi-element -->
 <template v-if="isAdmin">
 <h1>Admin</h1>
 <button>Edit</button>
 </template>
 
 <!-- 5. v-if vs v-show Performance Comparison -->
 <div v-if="occasionally">Switch Occasionally</div>
 <div v-show="frequently">Frequent switching(Not recommended for use in combination with `<transition>`,v-if That's the only way)</div>
</template>

<template>
 <!-- 1. Array -->
 <li v-for="item in items" :key="item.id">{{ item.name }}</li>
 
 <!-- 2. Array + Index -->
 <li v-for="(item, i) in items" :key="item.id">
 {{ i + 1 }}. {{ item.name }}
 </li>
 
 <!-- 3. Object -->
 <li v-for="(value, key) in user" :key="key">
 {{ key }}: {{ value }}
 </li>
 
 <!-- 4. Numbers -->
 <span v-for="n in 5" :key="n">{{ n }}</span>
 
 <!-- 5. String -->
 <span v-for="char in 'Hello'" :key="char">{{ char }}</span>
</template>

<template>
 <!-- 1. The Only One ID(Best) -->
 <li v-for="user in users" :key="user.id">{{ user.name }}</li>
 
 <!-- 2. Unique Field -->
 <li v-for="user in users" :key="user.email">{{ user.name }}</li>
 
 <!-- 3. Composite key -->
 <li v-for="post in posts" :key="`${post.userId}-${post.id}`">
 {{ post.title }}
 </li>
 
 <!-- 4. Use index (Second choice) -->
 <li v-for="(item, i) in items" :key="i">{{ item.name }}</li>
 
 <!-- 5. ❌ random()(Never, under any circumstances) -->
 <li v-for="item in items" :key="Math.random()">{{ item.name }}</li>
</template>

<template>
 <div>
 <!-- Search box -->
 <input v-model="searchQuery" placeholder="Search...">
 
 <!-- Filter by Category -->
 <select v-model="selectedCategory">
 <option value="all">All</option>
 <option value="phone">Phone</option>
 <option value="laptop">Laptop</option>
 </select>
 
 <!-- Sort -->
 <select v-model="sortBy">
 <option value="price">Price</option>
 <option value="name">Name</option>
 </select>
 
 <!-- List -->
 <ul>
 <li v-for="item in paginatedItems" :key="item.id">
 {{ item.name }} - ${{ item.price }}
 </li>
 </ul>
 
 <!-- Pagination -->
 <button :disabled="currentPage === 1" @click="currentPage--">
 Previous
 </button>
 <span>{{ currentPage }} / {{ totalPages }}</span>
 <button :disabled="currentPage === totalPages" @click="currentPage++">
 Next
 </button>
 </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const item = ref([
 { id: 1, name: 'iPhone', price: 999, category: 'phone' },
 { id: 2, name: 'MacBook', price: 2499, category: 'laptop' },
 { id: 3, name: 'iPad', price: 599, category: 'tablet' }
])

const searchQuery = ref('')
const selectedCategory = ref('all')
const sortBy = ref('price')
const currentPage = ref(1)
const pageSize = 10

const filteredItems = computed(() => {
 let result = item.value
 if (searchQuery.value) {
 result = result.filter(i => i.name.includes(searchQuery.value))
 }
 if (selectedCategory.value !== 'all') {
 result = result.filter(i => i.category === selectedCategory.value)
 }
 return [...result].sort((a, b) => {
 if (sortBy.value === 'price') return a.price - b.price
 return a.name.localeCompare(b.name)
 })
})

const paginatedItems = computed(() => {
 const start = (currentPage.value - 1) * pageSize
 return filteredItems.value.slice(start, start + pageSize)
})

const totalPages = computed(() =>
 Math.ceil(filteredItems.value.length / pageSize)
)
</script>

<!-- In Vue 3, v-if has higher priority than v-for (Vue 2 is the opposite) -->
<ul>
 <!-- Vue 3: First determine v-if, then v-for -->
 <li v-for="user in users" v-if="user.isActive" :key="user.id">
 {{ user.name }}
 </li>
 <!-- ✅ But Vue officially recommends using template to separate -->
 
 <!-- ❌ Incorrect wording(Not recommended) -->
 <li v-for="user in users" v-if="shouldShowUsers(user)" :key="user.id">
 {{ user.name }}
 </li>
 
 <!-- ✅ Recommendations:computed Filter -->
 <li v-for="user in activeUsers" :key="user.id">
 {{ user.name }}
 </li>
</template>