Getting Typescript error when trying to clear form using clear() in vue.js

Question

I am getting a typescript error when trying to reset a form when the user clicks on reset button.

onClearSearchFormClicked() {
  this.$refs.searchForm.reset();
}

197:27 Property 'reset' does not exist on type 'Element | Element[] | Vue | Vue[]'.
  Property 'reset' does not exist on type 'Element'.
    196 |   onClearSearchFormClicked() {
  > 197 |     this.$refs.searchForm.reset();
        |                           ^
    198 |   }
Version: typescript 3.8.3

Christian Vincenzo Traina · Accepted Answer · 2020-04-20 22:10:11Z

2

I wouldn't advise the other answers. TypeScript is correctly telling you that the object could not be a HtmlFormElement. Instead of forcing the casting and suppressing the error, you'd rather use a type guard:

if (this.$refs.searchForm instanceof HTMLFormElement) {
  this.$refs.searchForm.clear();
}

answered Apr 20, 2020 at 22:10

Christian Vincenzo Traina

10.6k4 gold badges46 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rich Brim · Accepted Answer · 2020-04-20 21:55:06Z

0

Here is the code that worked.

  onClearSearchFormClicked() {
    //this.$refs.searchForm.reset();
    (this.$refs.searchForm as HTMLFormElement).reset();
  }

edited Apr 20, 2020 at 21:55

answered Apr 20, 2020 at 20:51

Rich Brim

597 bronze badges

1 Comment

tao Over a year ago

No worries, I saw you're new, which is why I told you you shouldn't have done it. In general, if someone answers your question and helps you solve your issue, you should upvote it and, eventually mark it as appropriate (accepted) answer. That will help future users with a similar problem spot the right answer faster. On the bright side, Cristian added a better answer than mine, which is why I deleted mine and upvoted his. If I were you, I'd mark it as accepted, as it is correct. Welcome to Stack Overflow. Stay safe & happy coding!

Collectives™ on Stack Overflow

Getting Typescript error when trying to clear form using clear() in vue.js

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related