Vue.js Form Input Binding Challenge

This challenge focuses on a fundamental aspect of Vue.js development: handling user input in forms. You'll implement two-way data binding for various form elements, ensuring that changes in the UI are reflected in your Vue component's data, and vice-versa. This is a crucial skill for building interactive web applications.

Problem Description

Your task is to create a Vue.js component that includes a form with several input fields. You need to implement two-way data binding using Vue's v-model directive for each input type. This means that when a user types into an input field, the corresponding data property in your Vue component should update automatically. Conversely, if you programmatically change the data property, the input field in the UI should reflect that change.

Key Requirements:

1. Text Input (<input type="text">): Bind a string property to a text input.
2. Checkbox (<input type="checkbox">):
   • Bind a boolean property to a single checkbox.
   • Bind an array property to multiple checkboxes representing the same data category.
3. Radio Buttons (<input type="radio">): Bind a string or number property to a group of radio buttons.
4. Select Dropdown (<select>): Bind a string or number property to a select dropdown.
5. Textarea (<textarea>): Bind a string property to a textarea.

Expected Behavior:

• As the user interacts with each form element, the associated data property in the Vue component should update in real-time.
• If the component's data is modified, the corresponding form element should visually update to display the new value.
• When the form is submitted (though submission logic isn't the focus here, you can add a basic button to demonstrate), the current values of all bound properties should be accessible.

Edge Cases to Consider:

• Initial state of form elements (e.g., pre-checked checkboxes, selected dropdown options).
• Handling of empty values or nulls where applicable.

Examples

Example 1: Text Input

Vue Component Data (Initial):

data() {
  return {
    username: ''
  };
}

Template Snippet:

<input type="text" v-model="username" placeholder="Enter your username">

User Interaction: User types "Alice" into the input field.

Expected Component Data (After Interaction):

{
  username: 'Alice'
}

Explanation: The v-model="username" directive establishes a two-way binding. Typing in the input updates the username data property.

Example 2: Checkbox (Single)

Vue Component Data (Initial):

data() {
  return {
    isSubscribed: false
  };
}

Template Snippet:

<input type="checkbox" id="subscribe" v-model="isSubscribed">
<label for="subscribe">Subscribe to newsletter</label>

User Interaction: User checks the checkbox.

Expected Component Data (After Interaction):

{
  isSubscribed: true
}

Explanation: v-model directly binds the checkbox's checked state to the isSubscribed boolean.

Example 3: Radio Buttons

Vue Component Data (Initial):

data() {
  return {
    selectedOption: 'option1'
  };
}

Template Snippet:

<div>
  <input type="radio" id="option1" value="option1" v-model="selectedOption">
  <label for="option1">Option 1</label>

  <input type="radio" id="option2" value="option2" v-model="selectedOption">
  <label for="option2">Option 2</label>
</div>

User Interaction: User selects "Option 2".

Expected Component Data (After Interaction):

{
  selectedOption: 'option2'
}

Explanation: All radio buttons in the group share the same v-model directive. The value attribute of the selected radio button is assigned to the selectedOption data property.

Example 4: Select Dropdown

Vue Component Data (Initial):

data() {
  return {
    selectedCity: ''
  };
}

Template Snippet:

<select v-model="selectedCity">
  <option disabled value="">Please select a city</option>
  <option value="newyork">New York</option>
  <option value="london">London</option>
  <option value="tokyo">Tokyo</option>
</select>

User Interaction: User selects "London" from the dropdown.

Expected Component Data (After Interaction):

{
  selectedCity: 'london'
}

Explanation: The v-model on the <select> element binds its selected option's value attribute to the selectedCity data property.

Constraints

• The solution must be implemented using Vue.js and TypeScript.
• All form inputs must be bound using the v-model directive.
• Focus on the input binding aspect; elaborate styling or complex validation is not required.
• The component should be a single .vue file.

Notes

• Consider using Vue's Composition API or Options API – either is acceptable.
• Remember to define all necessary data properties within your Vue component.
• You can add a button to trigger a method that logs the current state of your bound data to the console, demonstrating that the binding is working correctly.
• For checkboxes bound to an array, ensure the initial data property is an array.
• For select dropdowns, the value attribute of <option> elements is crucial for binding.