jQuery plugin into Vue component – Part 3

This is we are continuing the conversion of jQuery plugin into Vue component. We have chosen the typeahead jQuery plugin for this work. If you feel strange here, please proceed to part 1 then part 2 of this guide for more information before continuing this.

Setup Initial Work for Part 3

So far we have completed several scenarios for our Vue component. We will use the work we have done in Part 2 up to “Passing data into Vue component”. I will share the link below for the completed work up to that stage. Please start this part 3 from there on.

Download: typeahead-vue-component-encodez-com-2.zip

Data binding with v-model on Vue component

Vue uses v-model directive to create two way data bindings on any form inputs and elements. It picks the correct way to update the element based on the input type. Here the official link to know more about v-model. Vue made it very simple to use the v-model directive with custom Vue component similar to built-in elements.

For v-model to be worked with the custom Vue component, we need to bind the value attribute to the value prop and then on the change event, we emit our own custom input event from within the component. Let’s look at the code.

Update the Root element with default value

Update the HTML block

Update the Vue typeahead component

In the component block, add the event listener after the initialization of the typeahead jQuery component.

We have bind the event now. The browser will update the selected value when the user pick any of the states from the list.

Vue Component demo

Right now, the selected state would be updated when you pick any value from the drop down list. That’s perfect. Yet, you might have noticed an issue. Jquery typeahead plugin support auto complete. Auto complete wouldn’t be working now. The reason is, we are only emiting input event from the typeahead:select event. jQuery typeahead support one more event called typeahead: autocomplete which we can use to fire the input event when the autocomplete occurs.

Add the following block of code with the typeahead:autocomplete event.

There are more event available with jQuery typeahead plugin. Please follow the link to see the list of custom event provided by the jQuery typeahead plugin. You can listen to as many as event and emit accordingly.

Play around and write to me in comment.

Follow the link for the works completed along with part 3

Download: typeahead-vue-component-encodez-com-4.zip

Thank you every one who spent time with me. Looking forward to write more on this topic.

Leave a Reply

Your email address will not be published. Required fields are marked *


Please wrap all source codes with [code][/code] tags.

This site uses Akismet to reduce spam. Learn how your comment data is processed.