DevExtreme Vue - ArrayStore

Extend a JavaScript array's functionality by placing it into an ArrayStore. It provides an interface for loading and editing data, and allows you to handle data-related events.

jQuery
JavaScript
$(function() {
    $("#lookupContainer").dxLookup({
        dataSource: new DevExpress.data.ArrayStore({
            data: products,
            onLoaded: function() {
                // Event handling commands go here
            }
        }),
        valueExpr: 'price',
        displayExpr: 'name'
    });
});
Angular
TypeScript
HTML
import { DxLookupModule } from 'devextreme-angular';
import ArrayStore from 'devextreme/data/array_store';
// ...
export class AppComponent {
    products = [/* ... */ ];
    lookupDataSource = new ArrayStore({
        data: this.products,
        onLoaded: function () {
            // Event handling commands go here
        }
    });
}
@NgModule({
    imports: [
        // ...
        DxLookupModule
    ],
    // ...
})
<dx-lookup
    [dataSource]="lookupDataSource"
    valueExpr="price"
    displayExpr="name">
</dx-lookup>

Data kept in the ArrayStore can be processed in a DataSource. For example, the DataSource can sort data.

jQuery
JavaScript
var products = [
    { name: "HD Video Player", price: 100 },
    { name: "SuperHD Video Player", price: 420 },
    { name: "SuperPlasma 50", price: 1500 },
    { name: "SuperLED 50", price: 200 }
];

$(function() {
    $("#lookupContainer").dxLookup({
        dataSource: new DevExpress.data.DataSource({
            store: products,
            sort: { getter: "name", desc: true }
        }),
        valueExpr: 'price',
        displayExpr: 'name'
    });
});
Angular
TypeScript
HTML
import { DxLookupModule } from 'devextreme-angular';
import DataSource from 'devextreme/data/data_source';
// ...
export class AppComponent {
    products = [/* ... */ ];
    lookupDataSource = new DataSource({
        store: this.products,
        sort: { getter: "name", desc: true }
    });
}
@NgModule({
    imports: [
        // ...
        DxLookupModule
    ],
    // ...
})
<dx-lookup
    [dataSource]="lookupDataSource"
    valueExpr="price"
    displayExpr="name">
</dx-lookup>
NOTE
Even if you have passed a JavaScript array to the dataSource option, the Lookup automatically places it into an ArrayStore wrapped into the DataSource you can get with the getDataSource() method.
See Also