Delivery quote · 2 / 5

Let the customer choose quantity

Add a labelled numeric field backed by Vue state.

YOUR TASK

Make this happen

3 steps

Add Vue quantity state with ref(1), a labelled numeric input and v-model.number. Set unitPrice to 12 for the upcoming estimate.
Keep the working capabilities from the previous lesson and connect the new pieces to the same solution.
Check the complete solution, then inspect any unmet requirements.

THE IDEA BEHIND IT

What this step adds

Add Vue quantity state with ref(1), a labelled numeric input and v-model.number. Set unitPrice to 12 for the upcoming estimate.

Files to work in

App.vue. Other files are the working baseline. New files include named resource skeletons and TODO guidance. Complete their fields and connect them using the objectives, schema completion and reference guide.

Reactivity is explicit

Import ref from vue. v-model.number converts the numeric control value instead of leaving numeric text. min is an input hint; production business validation still belongs at the operation boundary.

Check the authoring, then preview

Check solution compiles with the same Vue compiler source as the platform and checks this lesson’s structure. Generated code is never executed here. Equivalent formatting is accepted; the requested bindings and connections are part of the exercise.

The actual platform Vue compiler checks your component. Lesson checks inspect its authoring structure; they do not render the UI, execute JavaScript, type-check TypeScript, call APIs or save orders.

Files to change: App.vue

What you’re building: Give a customer a clear delivery quote they can adjust and confirm.

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

Read the starter files

App.vue

<template>
  <section aria-labelledby="quote-title">
    <h2 id="quote-title">Delivery quote</h2>
    <p>Review delivery costs before confirming.</p>
  </section>
</template>

Supplied supporting files

Reference: custom-apps · authoring