Project 5: Team Members Grid

Vue Engineer

Builds on these lessons

Component Task

Objective

A plain function declared in <script setup> becomes an event handler when wired up with @click — it can take arguments straight from the template.

You're building a team directory.

Task: create a selectedMember ref and a selectMember(name) function, called from a button with 'Dana Cole'.

Component.vue

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

const selectedMember = ref('');
function selectMember(name) {
  selectedMember.value = name;
}
</script>

<template>
  <button @click="selectMember('Dana Cole')">Select</button>
  <p>Selected: {{ selectedMember }}</p>
</template>

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

Build Output

🟢

Build your component to see the result

← Previous Next →