CoCoCoCoCoCo / docs
← Custom App Academy

Delivery quote · 3 / 5

Show the estimate immediately

Derive a total from quantity without duplicating state.

YOUR TASK

Make this happen

3 steps

  1. Add computed total = quantity.value * unitPrice and display Total: {{ total }} below the quantity input.

  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
</script>
<template>
  <section 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" />
  </section>
</template>
Supplied supporting files

Reference: custom-apps · authoring