How to clear input text in vuejs form?

When dealing with clearing form inputs in Vue.js, we often consider several different approaches. Below are some common methods, along with specific examples from my previous projects.

Method 1: Using v-model Binding to Directly Clear Data

In Vue.js, the v-model directive establishes two-way data binding. To clear the form, we can directly set the bound data to empty values. For instance, consider a simple form where users enter their name and email:

html
<template>
  <div>
    <form @submit.prevent="submitForm">
      <input type="text" v-model="user.name" placeholder="Name">
      <input type="email" v-model="user.email" placeholder="Email">
      <button type="submit">Submit</button>
      <button type="button" @click="resetForm">Reset</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: '',
        email: ''
      }
    };
  },
  methods: {
    submitForm() {
      // Form submission logic
      console.log(this.user);
    },
    resetForm() {
      this.user.name = '';
      this.user.email = '';
    }
  }
}
</script>

In this example, the submit button triggers the submitForm method, while the reset button triggers the resetForm method, which clears the bound data user.name and user.email.

Method 2: Using the Default Reset Behavior of HTML Forms

HTML forms include a built-in reset button that restores all <input> elements to their initial state when clicked. If your form fields are initially empty, this method is very useful.

html
<template>
  <div>
    <form @submit.prevent="submitForm">
      <input type="text" v-model="user.name" placeholder="Name">
      <input type="email" v-model="user.email" placeholder="Email">
      <button type="submit">Submit</button>
      <input type="reset" value="Reset">
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: '',
        email: ''
      }
    };
  },
  methods: {
    submitForm() {
      // Form submission logic
      console.log(this.user);
    }
  }
}
</script>

In this version, we use <input type="reset">. Clicking this button clears all form fields because, at page load, all v-model bound values are empty.

Method 3: Automatically Clearing the Form After Submission

Sometimes, you might want to automatically clear the form after the user submits it, preparing for potential subsequent inputs.

html
<template>
  <div>
    <form @submit.prevent="submitForm">
      <input type="text" v-model="user.name" placeholder="Name">
      <input type="email" v-model="user.email" placeholder="Email">
      <button type="submit">Submit</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: '',
        email: ''
      }
    };
  },
  methods: {
    submitForm() {
      // Form submission logic
      console.log(this.user);
      // Clear the form
      this.user.name = '';
      this.user.email = '';
    }
  }
}
</script>

In this example, the submitForm method handles submission logic and also resets the user object properties, thereby clearing the form.

Summary

The choice of method depends on specific requirements. If you need more control or specific logic to be executed during reset, programmatic methods (such as Method 1 and Method 3) are more suitable. If simply resetting the form to its initial state is needed, the HTML default reset button (Method 2) is a straightforward option. In my past projects, I flexibly chose these methods based on requirements to ensure the user interface is both intuitive and user-friendly.