jQuery plugin into Vue component – Part 2

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 of this guide for more information.

 Setup Initial Work for Part 2

We have completed the basic blocks of the component in part 1. Let us proceed with the advanced customization of the component in this part. Please start by downloading the completed work from the Part 1. For convenience, find the download link below.

typeahead-vue-component-encodez-com.zip

How to pass data into the components?

In our previous guide, we made the data as part of the component. This is perfect for the example. But in the real world, this wont benefit because the all purpose of the componentization is to reuse. Vue meets this requirement with the attribute props inside the component. To pass the data into our newly built component, let us start by adding the attribute props .

Component (typeahead component)

Prepare the child component to receive the data from the root component by adding the new attribute name under the attribute props .

Vue Root Component

The states are added in root component below data .

HTML

States are assigned to the child component from the root component

Well, go ahead and test in your browser. The completed work so far is attached below for download. Please verify your work against it and feel free to write in the comment, if you have any trouble in making it work.

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

Emitting a value with an event

Please start by downloading the pervious work.

There are various events associated with typeahead jquery plugin. We will use tow of them here in this guide for the purpose of demonstration.

  1. typeahead:open  – Fired when the results container is opened.
  2. typeahead:close  – Fired when the results container is closed.

Update the Vue Root Component

Update the root compnent as follow with a new variable.

Update the Vue typeahead Component

Update the child component with the new event jQuery event handler and use the Vue’s “$emit” function to pass the changes to the root component.

The $emit  function push the updates to the root element as new event where the parent can choose to listen to any of the event on the child component instance using v-on.

Update the HTML block

Update the HTML with additional parameters to track the changes from child component. Please follow the following code.

We have successfully created two events in our new component. Now fire up your browser and check for the updates. When you start typing in the field, the variable would change to opened  and one you selected any value, the variable would change to closed . This variable is updated in response to the event fired from our new component.

jQuery plugin into Vue component Part 2 final works

I will stop this part with this topic and will proceed the remaining section v-model binding in the part 3. Please use the following link to download the works we have done so far.

Download Link:
typeahead-vue-component-encodez-com-3.zip

What we are going to cover next?

  • Data binding with v-model on Vue component

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.