Clearing input in vuejs form

Question

Just completed a todolist tutorial   When submitting the form the input field doesn t clear    After trying both       document getElementById  todo-field   reset        document getElementById   todo-field   value         The input field properly clears but it also deletes the todo    It seems to delete the input field before it has time to push the new todo in the todos text array   Would love some input guys  Thanks     lt template gt     lt form id  todo-field  v-on submit  submitForm  gt       lt input type  text  v-model  text  gt     lt  form gt        lt ul gt          lt li v-for  todo in todos  gt           lt input class  toggle  type  checkbox  v-model  todo completed  gt           lt span  class   completed  todo completed   class  col-md-6  gt               lt label  dblclick  deleteTodo todo   gt                    todo text                lt  label gt           lt  span gt           lt  li gt        lt  ul gt       lt script gt    export default       name   todos         data              return             text                todos                      text  My Todo One         completed  false                    text  My Todo Two         completed  false                    text  My Todo Three         completed  false             End of array            methods        deleteTodo todo           this todos splice this todos indexOf todo  1              submitForm e           this todos push                                text  this text                  completed  false                                    document getElementById  todo-field   reset            document getElementById   todo-field   value                   To prevent the form from submitting         e preventDefault               lt  script gt

User · Answer

I had a situation where i was working with a custom component and i needed to clear the form data.

But only if the page was in 'create' form state, and if the page was not being used to edit an existing item. So I made a method.

I called this method inside a watcher on custom component file, and not the vue page that uses the custom component. If that makes sense.

The entire form $ref was only available to me on the Base Custom Component.

<!-- Custom component HTML -->
<template>
  <v-form ref="form" v-model="valid" @submit.prevent>
    <slot v-bind="{ formItem, formState, valid }"></slot>
  </v-form>
</template>

watch: {
  value() {
    // Some other code here
    this.clearFormDataIfNotEdit(this)
    // Some other code here too
  }
}
... some other stuff ....

methods: {
  clearFormDataIfNotEdit(objct) {
    if (objct.formstate === 'create' && objct.formItem.id === undefined) {
       objct.$refs.form.reset()
    }
  },
}

Basically i checked to see if the form data had an ID, if it did not, and the state was on create, then call the obj.$ref.form.reset() if i did this directly in the watcher, then it would be this.$ref.form.reset() obvs.

But you can only call the $ref from the page which it's referenced. Which is what i wanted to call out with this answer.

User · Answer

These solutions are good but if you want to go for less work then you can use  refs   lt form ref  anyName   submit  submitForm  gt   lt  form gt    lt script gt     methods          submitForm                Your form submission          this  refs anyName reset       This will clear that form               lt  script gt

User · Answer

I use this this  refs  refFormName   resetFields     this work fine for me

User · Answer

Markup   lt template lang  pug  gt    form     input input type  text   v-model  formData firstName       input input type  text   v-model  formData lastName       button  click  resetForm   value  Reset Form   Reset Form  lt  template gt    Script   lt script gt    const initFromData     firstName      lastName           export default       data           return           formData  Object assign     initFromData                       methods          resetForm                if shallow copy         this formData   Object assign     initFromData               if deep copy            this formData   JSON parse JSON stringify this initFromData                          lt  script gt    Read the difference between a deep copy and a shallow copy HERE

User · Answer

For reset all field in one form you can use event target reset     x000D   x000D  const app   new Vue   x000D      el    app       x000D      data    x000D   return          x000D              name   null  x000D       lastname   null  x000D       address   null x000D     x000D         x000D      methods    x000D          submitForm   function event   x000D              event preventDefault    x000D                process                 x000D              event target reset   x000D            x000D        x000D   x000D      x000D  form input type text  border-radius 5px  padding 6px  border 1px solid  ddd  x000D  form input type submit  border-radius 5px  padding 8px  background  060  color  fff  cursor pointer  border none  x000D   lt script src  https   cdnjs cloudflare com ajax libs vue 2 5 6 vue js  gt  lt  script gt  x000D   lt div id  app  gt  x000D   lt form id  todo-field  v-on submit  submitForm  gt  x000D           lt input type  text  v-model  name  gt  lt br gt  lt br gt  x000D           lt input type  text  v-model  lastname  gt  lt br gt  lt br gt  x000D           lt input type  text  v-model  address  gt  lt br gt  lt br gt  x000D           lt input type  submit  value  Send  gt  lt br gt  x000D       lt  form gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Assuming that you have a form that is huge or simply you do not want to reset each form field one by one  you can reset all the fields of the form by iterating through the fields one by one  var self   this  Object keys this data form  forEach function key index        self data form key              The above will reset all fields of the given this data form object to empty string  Let s say there are one or two fields that you selectively want to set to a specific value in that case inside the above block you can easily put a condition based on field name   if key      country       self data form key     Canada   else     self data form key           Or if you want to reset the field based on type and you have boolean and other field types in that case   if typeof self data form key       string       self data form key         else if  typeof self data form key       boolean       self data form key    false     For more type info see here  A basic vuejs template and script sample would look as follow   lt template gt     lt div gt       lt form  submit prevent  onSubmit  gt         lt input type  text  class  input  placeholder  User first name  v-model  data form firstName  gt         lt input type  text  class  input  placeholder  User last name  v-model  data form lastName  gt         lt input type  text  class  input  placeholder  User phone  v-model  data form phone  gt         lt input type  submit  class  button is-info  value  Add  gt         lt input type  button  class  button is-warning   click  resetForm    value  Reset Form  gt       lt  form gt     lt  div gt   lt  template gt    See ow the  submit prevent  onSubmit  is used in the form element  That would by default  prevent the form submission and call the onSubmit function    Let s assume we have the following  for the above     lt script gt    export default       data           return           data              form                firstName                  lastName                  phone                                              methods          onSubmit  function             console log  Make API request            this resetForm      clear form automatically after successful request                resetForm             console log  Reseting the form           var self   this    you need this because  this  will refer to Object keys below             Iterate through each object field  key is name of the object field          Object keys this data form  forEach function key index              self data form key                                       lt  script gt    You can call the resetForm from anywhere and it will reset your form fields

User · Answer

This solution is only for components  If we toggle show hide  components using booleans then data is also removed  No need to clean the form fields   I usually make components and initialize them using booleans  e g    lt template gt       lt button  click  show create form   true  gt Add New Record lt  button      lt create-form v-if  show create form    gt   lt  template gt     lt script gt      data       return         show create form false   making it false by default         methods       submitForm                      this axios post   submit-form-url  data config              then  response    gt                   this show create form  false    hide it again after success                   if you now click on add new record button then it will show you empty form               catch  error    gt                                                lt  script gt    When use clicks on edit button then this boolean becomes true and after successful submit I change it to false again

User · Answer

What you need is to set this text to an empty string in your submitForm function  submitForm e       this todos push                        text  this text              completed  false                      this text    quot  quot           To prevent the form from submitting     e preventDefault       Remember that binding works both ways  The  input  view can update the  string  model  or the model can update the view

[javascript] Clearing input in vuejs form

Examples related to javascript

Examples related to forms

Examples related to vue.js