Vue.js: Conditional & List Rendering

Six pieces of content plus two toggle buttons.
The first two lines are visible because show is true; 3.
Type A shows because type starts as 'A'; the admin block renders <h1>4.
Admin Panel</h1> with an Edit button;
5a is hidden (its v-if is false) while 5b is visible.
Clicking Toggle show removes line 1 from the DOM and sets display: none on line 2;
clicking Toggle type swaps between 3. Type A and 3. Type B.

1. v-if visible (click to toggle)
2. v-show visible
3. Type A
4. Admin Panel
[Edit]
5b. Frequent toggle (v-show)
[Toggle show] [Toggle type]

// Occasional toggling (logged in / logged out) → v-if
<div v-if="isLoggedIn">Welcome, {{ user.name }}</div>
<div v-else>Please login</div>

// Frequent toggling (tab switching) → v-show
<button v-show="isActive">Active</button>
<button v-show="!isActive">Inactive</button>

Five sections rendered in order — a plain array list (Apple / Banana / Cherry), the same list with 1.–3.
prefixes, the object rendered as name: Alice / age: 25 / email: alice@example.com, the numbers [1][2][3][4][5], and one span per character of Hello.

1. Array
Apple
Banana
Cherry

2. Array + index
1. Apple
2. Banana
3. Cherry

3. Object
name: Alice
age: 25
email: alice@example.com

4. Number
[1][2][3][4][5]

5. String
H e l l o

The list starts with a single row, Alice, plus the button Toggle Alice status.
Clicking it flips isActive on the user with id === 1, so the row disappears;
clicking again brings Alice back.
Bob never appears because the computed property filters him out before v-for runs.

Alice
[Toggle Alice status]

<!-- ✅ Recommended: unique ID -->
<li v-for="user in users" :key="user.id">

<!-- ✅ Second choice: a unique field (email, phone number, etc.) -->
<li v-for="user in users" :key="user.email">

<!-- ❌ Avoid: index (items get mismatched when data changes) -->
<li v-for="(user, index) in users" :key="index">

<!-- ❌ Never: random() (different on every render, forces a rebuild) -->
<li v-for="user in users" :key="Math.random()">

Five lists that look identical on the first render — Alice / Bob twice, Post A / Post B, then X / Y twice.
The difference only shows up on updates: keys 1–3 stay bound to the right data, index can shift content when the list is reordered, and Math.random() produces a new key on every render, so Vue tears down and rebuilds every node.

1. Unique ID (best)
Alice
Bob

2. Unique field
Alice
Bob

3. Composite key
Post A
Post B

4. Using index (second choice)
X
Y

5. ❌ random() (never)
X
Y

const { ref, computed } = 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'

// Filtering + sorting (computed caches automatically)
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 for the current page
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)
)

A search box, two selects, three rows sorted by price ascending (iPad - $599, iPhone - $999, MacBook - $2499), and a pager reading 1 / 1 with both buttons disabled.
Typing i narrows the list, choosing phone keeps only iPhone, and switching the sort to Name reorders the rows alphabetically — all without touching the original items array.

[Search...] [All v] [Price v]

iPad - $599
iPhone - $999
MacBook - $2499

[Previous] 1 / 1 [Next]