Project 6: Testimonial Slider
Vue Engineer
Builds on these lessons
Component Task
Objective
v-model binds an input's value to a ref in both directions — typing updates the ref, and changing the ref updates the input.
You're building a testimonial search box.
Task: bind a search ref to an input with v-model, and echo its current value below.
Component.vue
<script setup>
import { ref } from 'vue';
const search = ref('');
</script>
<template>
<input v-model="search" placeholder="Search testimonials">
<p>Searching for: {{ search }}</p>
</template>
* Hint: Correct characters turn green, incorrect ones turn red.
Build Output
🟢
Build your component to see the result