[Vuejs]-Reset(clear) input fields JS/HTML with button "clean"

0👍

Code responsible for clearing fields should be in the component where the fields are defined. Add a resetFields function under methods object of your Data.vue component.

/* .. */
methods: {
  /* ... */
  resetFields() {
    this.filter.eori = ''
    this.filter.docSubType = ''
    this.filter.data1 = ''

    // Or just clear all object's properties
    Object.keys(this.filter).forEach(key => { 
      this.filter[key] = ''
    })
  }
}

1👍

<!DOCTYPE html>
<html>
<body>

<form action="/action_page.php">
  Email: <input type="text" name="email"><br>
  Pin: <input type="text" name="pin" maxlength="4"><br>
  <input type="reset" value="Reset">
  <input type="submit" value="Submit">
</form>

<p>Click on the reset button to reset the form.</p>

</body>
</html>

The input type reset is a native implementation for form resets

-1👍

change 1:
add onclick=”resetFields()” in ur button tag instead of @click=resetField()

change 2: add jquery CDN to your HTML code just above tag
https://code.jquery.com/

change 3: add a script tag in the same HTML as below:
function resetFields(){$(“#number”).val(“”)}

You can use javascript also.

thanks

bangthugs

Leave a comment