Vue.js Forms

How are forms handled in Vue.js?

Forms in Vue.js are handled using the v-model directive, which creates a two-way data binding between the form input elements and the Vue instance data. This allows for reactive updates between the form and the application state.

What is the purpose of the v-model directive?

The v-model directive is used to bind form input elements to a property in the Vue instance. It automatically updates the property when the input value changes and updates the input value when the property changes.

const app = new Vue({
  el: '#app',
  data: {
    inputValue: ''
  },
  template: `
    <div>
      <input v-model="inputValue" placeholder="Type something...">
      <p>You typed: {{ inputValue }}</p>
    </div>
  `
});

How do you bind input elements using v-model?

You can bind different types of input elements using v-model, including text inputs, checkboxes, radio buttons, and select dropdowns. Vue automatically handles the binding based on the type of input.

<div id="app">
  <input type="text" v-model="textInput" placeholder="Text input">
  <input type="checkbox" v-model="checkboxInput"> Check me!
  <input type="radio" value="Option1" v-model="selectedOption"> Option 1
  <input type="radio" value="Option2" v-model="selectedOption"> Option 2
  <select v-model="selectedValue">
    <option disabled value="">Please select one</option>
    <option>Value 1</option>
    <option>Value 2</option>
  </select>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    textInput: '',
    checkboxInput: false,
    selectedOption: '',
    selectedValue: ''
  }
});
</script>

How do you handle form submission in Vue.js?

You can handle form submission in Vue.js by using the v-on directive to listen for the submit event and executing a method that processes the form data.

<form @submit.prevent="handleSubmit">
  <input v-model="username" placeholder="Enter username">
  <button type="submit">Submit</button>
</form>

<script>
new Vue({
  el: '#app',
  data: {
    username: ''
  },
  methods: {
    handleSubmit() {
      console.log('Form submitted with username:', this.username);
    }
  }
});
</script>

What is the .prevent modifier in form handling?

The .prevent modifier is used to call preventDefault() on the event, preventing the default behavior of the form submission, which is to refresh the page. This allows you to handle the submission with JavaScript instead.

<form @submit.prevent="handleSubmit">
  <input v-model="email" placeholder="Enter email">
  <button type="submit">Submit</button>
</form>

<script>
new Vue({
  el: '#app',
  data: {
    email: ''
  },
  methods: {
    handleSubmit() {
      console.log('Email submitted:', this.email);
    }
  }
});
</script>

How do you validate forms in Vue.js?

You can validate forms in Vue.js using methods to check the input values before submission. You can also use computed properties to determine the validity of the form or integrate with third-party validation libraries.

<form @submit.prevent="handleSubmit">
  <input v-model="username" placeholder="Username">
  <p v-if="!isUsernameValid">Username must be at least 3 characters.</p>
  <button type="submit" :disabled="!isUsernameValid">Submit</button>
</form>

<script>
new Vue({
  el: '#app',
  data: {
    username: ''
  },
  computed: {
    isUsernameValid() {
      return this.username.length >= 3;
    }
  },
  methods: {
    handleSubmit() {
      console.log('Form submitted with username:', this.username);
    }
  }
});
</script>

How can you create a dynamic form in Vue.js?

You can create a dynamic form in Vue.js by using v-for to render form fields based on an array of objects. This allows you to generate form inputs dynamically based on the data.

<div id="app">
  <form @submit.prevent="handleSubmit">
    <div v-for="(field, index) in formFields" :key="index">
      <label>{{ field.label }}</label>
      <input v-model="field.value" :type="field.type">
    </div>
    <button type="submit">Submit</button>
  </form>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    formFields: [
      { label: 'Username', value: '', type: 'text' },
      { label: 'Password', value: '', type: 'password' },
      { label: 'Email', value: '', type: 'email' }
    ]
  },
  methods: {
    handleSubmit() {
      console.log('Form submitted with values:', this.formFields);
    }
  }
});
</script>

What is the v-model.lazy modifier?

The v-model.lazy modifier is used to update the bound data only on the change event instead of the default input event. This can improve performance for certain scenarios, especially in forms with many inputs.

<input v-model.lazy="inputValue" placeholder="Type something...">

<script>
new Vue({
  el: '#app',
  data: {
    inputValue: ''
  }
});
</script>

How do you create a form with checkboxes and radio buttons in Vue.js?

You can create forms with checkboxes and radio buttons in Vue.js using v-model to bind to the data. For checkboxes, you can bind to an array to allow multiple selections, while radio buttons can bind to a single value.

<div id="app">
  <h3>Select your favorite fruits:</h3>
  <div>
    <label>
      <input type="checkbox" v-model="selectedFruits" value="Apple"> Apple
    </label>
    <label>
      <input type="checkbox" v-model="selectedFruits" value="Banana"> Banana
    </label>
    <label>
      <input type="checkbox" v-model="selectedFruits" value="Cherry"> Cherry
    </label>
  </div>
  <p>Selected fruits: {{ selectedFruits.join(', ') }}</p>

  <h3>Choose your favorite color:</h3>
  <label>
    <input type="radio" v-model="favoriteColor" value="Red"> Red
  </label>
  <label>
    <input type="radio" v-model="favoriteColor" value="Green"> Green
  </label>
  <label>
    <input type="radio" v-model="favoriteColor" value="Blue"> Blue
  </label>
  <p>Favorite color: {{ favoriteColor }}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    selectedFruits: [],
    favoriteColor: ''
  }
});
</script>