Data Binding

The ListBox provides support for binding it to local data arrays and to remote data services.

Binding to Local Data Arrays

To populate the ListBox with local data, bind it to a local data array by using the Kendo UI Data Source component.

<div id="vueapp" class="vue-app">
    <kendo-listbox :data-source=dataSourceArray
                   :data-text-field="'name'"
                   :data-value-field="'id'"                
                   :toolbar-tools="['moveUp', 'moveDown', 'remove']">
    </<kendo-listbox>
</div>
Vue.use(ListBoxInstaller);

new Vue({
    el: "#vueapp",
    data: function() {
        return {
            dataSourceArray: [
                { name: "John", id: 1 },
                { name: "Jane", id: 2 },
                { name: "Jim", id: 3 },
                { name: "Tim", id: 4 },
                { name: "Mary", id: 5 }
            ]
        }
    }
})

Binding to Remote Data Services

To initialize the ListBox by binding it to a remote data service, use the Kendo UI Data Source component. If a data source is not provided in its configuration settings, the ListBox uses the options from the HTML elements as its data source. You can configure the widget for remote operations. For more information, refer to the article on CRUD operations.

<div id="vueapp" class="vue-app">
    <kendo-datasource ref="datasource"
                      :type="'odata'"
                      :transport-read="'https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers'">
    </kendo-datasource>
    <kendo-listbox :data-source-ref="'datasource'"
                        :data-text-field="'ContactName'"
                        :data-value-field="'CustomerID'"
                        :toolbar-tools="['moveUp', 'moveDown', 'remove']">
    </kendo-listbox>
</div>
Vue.use(ListBoxInstaller);
Vue.use(DataSourceInstaller);

new Vue({
    el: "#vueapp"
})

In this article