Consider this Vue 3 component using v-if and v-for together:
<template>
<ul>
<li v-for="item in items" :key="item.id" v-if="item.visible">{{ item.name }}</li>
</ul>
</template>
<script setup>
import { ref } from 'vue'
const items = ref([
{ id: 1, name: 'Apple', visible: true },
{ id: 2, name: 'Banana', visible: false },
{ id: 3, name: 'Cherry', visible: true }
])
</script>What will be the rendered output inside the <ul>?
<template>
<ul>
<li v-for="item in items" :key="item.id" v-if="item.visible">{{ item.name }}</li>
</ul>
</template>
<script setup>
import { ref } from 'vue'
const items = ref([
{ id: 1, name: 'Apple', visible: true },
{ id: 2, name: 'Banana', visible: false },
{ id: 3, name: 'Cherry', visible: true }
])
</script>Remember that v-if inside v-for filters items after looping.
The v-for loops over all items, but v-if only renders the
item.visible is true. So only 'Apple' and 'Cherry' appear.This Vue 3 component toggles a message on button click:
<template>
<button @click="toggle">Toggle</button>
<p>{{ message }}</p>
</template>
<script setup>
import { ref } from 'vue'
const show = ref(false)
const message = ref('Hidden')
function toggle() {
show.value = !show.value
message.value = show.value ? 'Visible' : 'Hidden'
}
</script>What will the <p> show after clicking the button twice?
<template> <button @click="toggle">Toggle</button> <p>{{ message }}</p> </template> <script setup> import { ref } from 'vue' const show = ref(false) const message = ref('Hidden') function toggle() { show.value = !show.value message.value = show.value ? 'Visible' : 'Hidden' } </script>
Each click toggles the state. Think about the state after two toggles.
Initially, show is false and message is 'Hidden'. After first click, show becomes true and message 'Visible'. After second click, show toggles back to false and message 'Hidden'.
You want to render a component dynamically based on a variable currentView. Which option uses the correct syntax?
<template> <component :is="currentView" /> </template> <script setup> import { ref } from 'vue' const currentView = ref('MyComponent') </script>
Dynamic component requires binding the is attribute to a variable.
Option B correctly binds is to the variable currentView using :. Option B treats it as a string literal. Option B binds to the string 'currentView' literally. Option B tries to call currentView as a function which is invalid.
Given this component:
<template>
<ul>
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>
<button @click="addItem">Add Item</button>
</template>
<script setup>
import { reactive } from 'vue'
const items = reactive([
{ id: 1, name: 'One' },
{ id: 2, name: 'Two' }
])
function addItem() {
items.push({ id: 3, name: 'Three' })
}
</script>Clicking 'Add Item' does not update the list. What is the cause?
<template>
<ul>
<li v-for="item in items" :key="item.id">{{ item.name }}</li>
</ul>
<button @click="addItem">Add Item</button>
</template>
<script setup>
import { reactive } from 'vue'
const items = reactive([
{ id: 1, name: 'One' },
{ id: 2, name: 'Two' }
])
function addItem() {
items.push({ id: 3, name: 'Three' })
}
</script>Think about how Vue tracks changes in arrays with reactive vs ref.
Vue 3's reactive does not track array mutation methods like push properly. Using ref([]) and updating items.value is the correct approach to make array mutations reactive.
<Suspense> in Vue 3 dynamic rendering?Vue 3 introduces the <Suspense> component. What is its primary purpose when rendering dynamic components?
Think about user experience when waiting for slow components.
<Suspense> lets you display fallback UI (like a loading spinner) while waiting for async components or data to load, improving perceived performance and user experience.