Project 18: Registration Flow

Vue Engineer

Component Task

Objective

Review day: combine v-if and v-model — days 6 and 7 — into a two-step form.

You're building a registration flow.

Task: create a step ref and an email ref; show the email input on step 1 and a welcome message on any other step, with a button to advance.

Component.vue

<script setup>
import { ref } from 'vue';

const step = ref(1);
const email = ref('');

function nextStep() {
  step.value++;
}
</script>

<template>
  <input v-if="step === 1" v-model="email" placeholder="Email">
  <p v-else>Welcome, {{ email }}!</p>
  <button v-if="step === 1" @click="nextStep">Next</button>
</template>

* Hint: Correct characters turn green, incorrect ones turn red.

Build Output

🟢

Build your component to see the result

← Previous Next →