VUE Free Section Starter Challenge 25 min

3. Two-Way Data Binding with v-model

Overview: Synchronize input fields and component state effortlessly with `v-model`.

Concept & Syntax Guide

`v-model` links form inputs to state variables in both directions: updating the input updates the variable, and modifying the variable updates the input.

Hands-On Practice Exercise

Build a Live Search Input

Bind an input `<input v-model="query">` and display: "Searching for: {{ query }}".

Target Output: Searching for: Laravel SaaS

Need a hint? Click here to reveal

Hint: Check syntax carefully and make sure your code contains: Searching for: Laravel SaaS

VUE Code Editor

1
2
3
4
5
6
7
8
9
10

<div id="app" style="padding:20px;">
  <input v-model="query" placeholder="Search templates..." style="padding:8px 12px;">
  <p>Searching for: <strong>{{ query }}</strong></p>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script>
const { createApp, ref } = Vue;
createApp({
  setup() {
    const query = ref('Laravel SaaS');
    return { query };
  }
}).mount('#app');
</script>