[Vuejs]-Jquery method stops to works after hide and show with vuejs

2👍

Here’s answer along with reason

You are binding the typeAhead handler to the input element using direct
binding which attaches the handler only to the elements that already exists.

That’s the reason it works for the first time when the page loads.

You are using v-if which destroys and recreates the element. since the element is getting recreated dynamically
the typehead handler is not bound anymore to the subsequently rendered input elements

if you just want to show/hide the input element using v-show is better as it just toggles the css display property
and you dont have to worry about binding of the handler as imput element is not getting removed anymore

Leave a comment