Skip to content

Vue JS Training

Challenge#1

To touch on as much of Vue (and JS) as possible we need to create a simple dynamic contact form that submits to an API endpoint.

The contact form must have the following inputs:

  • Title - Select input with around 4 options (Mr, Ms, Mrs, Prof, etc), required

    • This will require the use of a loop using v-for and data object with possible values
    • Use a data object in your component to define a key value object to use in the loop. This makes the possible values explicit.

  • First name - Text input, required

  • Middle Names - Text input, optional
  • Last name - Text input, required
  • Phone Number - Text input, required

Goals

You learn how to:

  • Write a simple Vue component
  • Use the data model binding to map data from the inputs to the component's data layer
  • Basic validation in Javascript
  • How to interact with a simple API
  • Manipulate the data model in response to data coming back from an API
  • Write standard classes using Typescript

Redacted

During the challenge, you should try to keep things DRY and create new components to be used as part of the form.

Restrictions

You need to conform to best practices outlined here.

Do not use references to components directly, the challenge can be completed using props.

Standalone classes should be created using Typescript.

Challenges

The training challenge is split in to different tiers and gradually increases in complexity. You should complete the challenge in order as shown below.