All Components

Loading Content with AJAX

The TabStrip provides the built-in option for asynchronously loading content from an array of URLs.

The URLs are expected to return HTML fragments that can be loaded in the items of the TabStrip.

The TabStrip provides support for binding it to local data arrays.

<div id="vueapp" class="vue-app">
    <kendo-tabstrip :content-urls="contentUrls">
        <ul>
            <li class="k-state-active">Dimensions &amp; Weights</li>
            <li>Engine</li>
            <li>Chassis</li>
        </ul>
    </kendo-tabstrip>
</div>
Vue.use(LayoutInstaller);

new Vue({
    el: '#vueapp',
    data: {
        contentUrls: [
            'https://demos.telerik.com/kendo-ui/content/web/tabstrip/ajax/ajaxContent1.html',
            'https://demos.telerik.com/kendo-ui/content/web/tabstrip/ajax/ajaxContent2.html',
            'https://demos.telerik.com/kendo-ui/content/web/tabstrip/ajax/ajaxContent3.html'
        ]
    }
})
In this article