Vue Lookup - 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.


<template>
    <DxLookup
        :data-source="dataSource"
        value-expr="price"
        display-expr="name"
    />
</template>
 
<script>
import 'devextreme/dist/css/dx.light.css';
 
import { DxLookup } from 'devextreme-vue/lookup';
import ArrayStore from "devextreme/data/array_store";
 
const products = [/* ... */ ];
 
export default {
    components: {
        DxLookup
    },
    data() {
        return {
            dataSource: new ArrayStore({
                data: products,
                onLoaded: function () {
                    // Event handling commands go here
                }
            })
        };
    }
}
</script>

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


<template>
    <DxLookup
        :data-source="dataSource"
        value-expr="price"
        display-expr="name"
    />
</template>
 
<script>
import 'devextreme/dist/css/dx.light.css';
 
import { DxLookup } from 'devextreme-vue/lookup';
import DataSource from "devextreme/data/data_source";
 
const products = [/* ... */ ];
 
export default {
    components: {
        DxLookup
    },
    data() {
        return {
            dataSource: new DataSource({
                store: products,
                sort: { getter: "name", desc: true }
            })
        };
    }
}
</script>

NOTE

Even if you have passed a JavaScript array to the dataSource property, the Lookup automatically places it into an ArrayStore wrapped into the DataSource you can get with the getDataSource() method.

Vue Lookup - ArrayStore

See Also