Vue 2: Two-Way Data Binding Lab
Easy
1
25.0% Acceptance
Objective
In this lab, you will build a simple Vue 2 app that demonstrates real-time data binding. You'll create an input field and a display area where whatever you type into the input field gets reflected immediately.
Challenges Information
Challenge 1: Create an Input Field
Create an input field and set its id
attribute to 'input'. Make sure the type
attribute is set to text.
Challenge 2: Create a Paragraph Tag
Create a paragraph (p) element. Assign an id
attribute to it with the value 'output'. Make sure it is empty to start with.
Challenge 3: Reflect Input to Output
Whatever text is entered into the input field (with id='input'
) should be reflected in real-time into the paragraph (with id='output'
).
Note: Reflecting in real-time means as you type in the input, the text should appear in the paragraph.