Vue 2: Numeric Input with Data Binding

Overview

In this lab, you'll create a simple Vue 2 application with an input field that accepts only numeric values. You will use v-model.number to bind this input to a variable, which will then be mirrored in a <p> tag below the input field.

Objectives

By the end of this lab, you should be able to:

1. Initialize a Vue 2 application.
2. Create an input field that restricts its input to numbers.
3. Use v-model.number for two-way data binding between an input field and a Vue data property.
4. Display the data property's value in a <p> tag.

Steps

Step 1: Implement Vue Data Property

Create a Vue data property that will hold the numeric value entered in the input field. This will be a part of your Vue instance's data object.

// Example
data() {
  return {
    inputValue: null,
  };
}

Step 2: Two-Way Data Binding

Use v-model.number to establish two-way data binding between the input field and the Vue data property you created.

<!-- Example -->
<input type="number" v-model.number="inputValue">

Step 3: Display Mirrored Data

Create a <p> tag below the input field that will display the value of the Vue data property, effectively mirroring what is entered into the input field.

<!-- Example -->
<p>{{ inputValue }}</p>

Challenges Information

Challenge 1: Create an Input Field

Objective: Create an input field with the id number-only. The input field should not have the type attribute set to number.

Note: Use v-model.number to bind the input value. Vue should manage the number-only constraint.

Challenge 2: Create a Result Display

Objective: Create a p tag with the id result where the numeric content of the input field will be mirrored.

Challenge 3: Filter Alphanumeric String - Case 1

Objective: If the user types 123abc into the input field with id number-only, the text inside the p tag with id result should be 123. The alphabetic characters should be filtered out. You may need to update the DOM immediately after a change in the input.

Challenge 4: Filter Alphanumeric String - Case 2

Objective: If the user types abc444 into the input field with id number-only, the text inside the p tag with id result should be 444. The alphabetic characters should be filtered out. Make sure the DOM updates immediately to reflect this change.