CoCoCoCoCoCo / docs
← Custom App Academy

Delivery quote · 4 / 5

Make confirmation explicit

Let the customer confirm deliberately and explain what happened.

YOUR TASK

Make this happen

3 steps

  1. Add confirmed = ref(false), a Confirm quote button that sets it true, and conditional text: Quote confirmed locally. No order has been sent.

  2. Keep the working capabilities from the previous lesson and connect the new pieces to the same solution.

  3. Check the complete solution, then inspect any unmet requirements.

Start in App.vue, then choose Check solution.

This step starts with the earlier solution and one new challenge. Each lesson keeps its own draft.

Read the starter files

App.vue

<script setup>
import { ref, computed } from 'vue'
const quantity = ref(1)
const unitPrice = 12
const total = computed(() => quantity.value * unitPrice)

</script>
<template>
  <section class="quote" aria-labelledby="quote-title">
    <h2 id="quote-title">Delivery quote</h2>
    <label for="quantity">Quantity</label>
    <input id="quantity" type="number" min="1" v-model.number="quantity" />
    <p>Total: {{ total }}</p>
  </section>
</template>
Supplied supporting files

Reference: custom-apps · authoring