Forms

In Vue, handling forms is straightforward and flexible, thanks to its two-way data binding and powerful directives.

We can easily bind form "inputs" to "data" properties and handle user input using event-handling directives.

Binding Form Inputs:

We can use the "v-model" directive to create two-way data binding between form inputs and Vue component data properties.

This allows changes made by the user to automatically update the data, and vice versa.

Example:

<template>
  <div>
    <form @submit.prevent="submitForm">
      <div>
        <input
          type="text"
          v-model="username"
          placeholder="Enter your username"
        />
      </div>
      <button type="submit">
        Submit
      </button>
    </form>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      username: "",
      isStudent: false,
      selectedOption: "",
    };
  },
  methods: {
    submitForm() {
      // Access this.username to get the value of the input field
      console.log("this", this.username, this.isStudent, this.selectedOption);
    },
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Handling Form Submissions:

Example:

methods: {
  submitForm() {
    // Handle form submission, e.g., send data to server
    console.log('Submitted username:', this.username);
  }
}

Example:

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

We can use event handling directives like "@click", "@submit", etc., to handle form submissions and perform any necessary actions, such as submitting data to a server or validating input fields.

Example:

<select v-model="selectedOption">
  <option value="option1">
    Option 1
  </option>

  <option value="option2">
    Option 2
  </option>
</select>

Select Dropdowns:

Use "v-model" to bind select "dropdowns" to a "data" property.

We can also use the "v-for" directive to generate options dynamically.

Full Code:

<template>
  <div>
    <form @submit.prevent="submitForm">
      <div>
        <input
          type="text"
          v-model="username"
          placeholder="Enter your username"
        />
      </div>
      <div>
        <input type="checkbox" v-model="isStudent" name="isStudent" /> Is
        Student
      </div>
      <div>
        <select v-model="selectedOption">
          <option value="option1">Option 1</option>
          <option value="option2">Option 2</option>
        </select>
      </div>
      <button type="submit">Submit</button>
    </form>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      username: "",
      isStudent: false,
      selectedOption: "",
    };
  },
  methods: {
    submitForm() {
      // Access this.username to get the value of the input field
      console.log("this", this.username, this.isStudent, this.selectedOption);
    },
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

"Forms" in Vue provide a simple and intuitive way to handle user input and manage form state.

With features like two-way data binding, event handling, and directive-based form bindings, Vue.js makes building and managing forms a breeze.

<-- Watchers