Project 17: Search Results Page
Vue Engineer
Component Task
Objective
Review day: combine computed properties and v-for — days 4 and 8 — to filter a list live as you type.
You're building a search results page.
Task: create a query ref bound to an input and an items ref, and a results computed that filters items by the query, rendered with v-for.
Component.vue
<script setup>
import { ref, computed } from 'vue';
const query = ref('');
const items = ref(['Angular Guide', 'Vue Basics', 'React Hooks']);
const results = computed(() =>
items.value.filter(item => item.toLowerCase().includes(query.value.toLowerCase()))
);
</script>
<template>
<input v-model="query" placeholder="Search...">
<ul>
<li v-for="result in results" :key="result">{{ result }}</li>
</ul>
</template>
* Hint: Correct characters turn green, incorrect ones turn red.
Build Output
🟢
Build your component to see the result