In this tutorial we will show how you can add new tabs with Vue components inside in jqxTabs.
Refer to Vue Getting Started and Vue Getting Started with jqxTabs before you start with this help topic.
We will start the tutorial with this jqxTabs Vue example:
The Vue component that we will add in the jqxTabs will be called Component.vue and it will look like this:
Now for adding a new tab with the Vue component we will be using the addLast method of jqxTabs and will create an instance of the Component class dynamically. Then we will mount it in the newly added tab.
For this purpose we need to import Component.vue and the Vue object:
We will use the mounted Vue lifecycle hook for adding the new tab. Here is the code we will be using:
We are adding a new tab using addLast method containing a div with a specific id, in our
case "newTab".
Then we are passing the imported Component object to Vue.extend to
create a subclass of the Vue constructor.
Now we can create an instance out of it with the new keyword.
Every Vue instance has a method called $mount on it which mounts the component instance on
the element you pass to it.
In our case, we will not pass anything to it.
Then we get the div element with id "newTab" that we have added to the new tab and append
to it the DOM element reference of the Component. It is obtained using the $el
property of the instance.
We have successfully added a new tab containing a Vue component to the jqxTabs.
Our final example will look like this: