All Components

Data Binding

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

Local data arrays are appropriate for limited value options. To bind the TabStrip to local data, use the Kendo UI Data Source component.

<div id="vueapp" class="vue-app">
    <kendo-tabstrip :data-source="localDataSource"
                    data-text-field="Name"
                    data-content-field="Content">
    </kendo-tabstrip>
</div>
Vue.use(LayoutInstaller);

new Vue({
    el: '#vueapp',
    data: {
        localDataSource: new kendo.data.DataSource({
            data: [
                { Name: "Tab1", Content: "Tab1: content" },
                { Name: "Tab2", Content: "Tab2: content" }
            ]
        })
    }
})
In this article