Sometimes, we want to clear an input in a Vue.js form.

In this article, we’ll look at how to clear an input in a Vue.js form.

How to clear an input in a Vue.js form?

To clear an input in a Vue.js form, we can set our v-model values to an empty string.

For instance, we write

<template>
  <div>
    <form id="todo-field" @submit.prevent="submitForm">
      <input type="text" v-model="name" />
    </form>
  </div>
</template>

<script>
export default {
  //...
  data() {
    return {
      name: "",
    };
  },
  methods: {
    submitForm(event) {
      this.name = "";
    },
  },
  //...
};
</script>

to add a form with an input that has its input value to name.

We call submitForm when we submit the form.

In submitForm, we set this.name to an empty string to empty string when we submit the form.

Conclusion

To clear an input in a Vue.js form, we can set our v-model values to an empty string.