DEV Community

loading...

VueJS Watchers Issue

thecodingstoic profile image theCodingStoic ・1 min read

So, I am working my way through the Vue Official Guide. However, I am using Single File Components instead of the Vue Components that the examples use and have run into a snag on the Watchers section that I have been beating my head against my desk about--fatigue may be a contributing factor here. The issue is that I keep getting an error that says this.debouncedGetAnswer() is not a function. The result is that the watcher never actually finishes. Any help would be greatly appreciated.

https://codesandbox.io/embed/vueguideofficial-9ciyc

Discussion

pic
Editor guide
Collapse
terabytetiger profile image
Tyler V. (he/him)

The issue is with a misplaced }.

What you have is trying to include created and methods as part of your watch.

If you move the } on line 64 to between lines 32 and 33 that should put you back on track, but admittedly I'm not getting anything other than the "Questions usually contain a question mark" answer in Codesandbox.

It's working when I run the code locally after moving the } though...

Collapse
thecodingstoic profile image
theCodingStoic Author

The second issue was a misplaced ).

On line 49 the conditional should have been written:
if(this.answer.indexOf('?') === -1) whereas I had if(this.answer.indexOf('?' === -1)).

Collapse
terabytetiger profile image
Tyler V. (he/him)

Wow, it would have taken me forever to find that - good catch!

Thread Thread
thecodingstoic profile image
theCodingStoic Author

Fortunately, you made me conscious of such possibilities :)

Collapse
thecodingstoic profile image
theCodingStoic Author

TY muchly. I am getting the same thing but at least the first issue is solved and it is a new week now. :)