DevExtreme Vue - OData Service

Use the ODataStore to bind the Lookup to data provided by an OData service.


<template>
    <DxLookup
        :data-source="products"
        value-expr="Product_Cost"
        display-expr="Product_Name"
    />
</template>
 
<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';
 
import { DxLookup } from 'devextreme-vue/lookup';
import ODataStore from "devextreme/data/odata/store";
 
export default {
    components: {
        DxLookup
    },
    data() {
        return {
            products: new ODataStore({
                url: "https://js.devexpress.com/Demos/DevAV/odata/Products",
                key: "Product_ID"
            })
        };
    }
}
</script>

Data kept in the ODataStore can be processed in a DataSource. For example, the DataSource can filter data.


<template>
    <DxLookup
        :data-source="products"
        value-expr="Product_Cost"
        display-expr="Product_Name"
    />
</template>
 
<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';
 
import { DxLookup } from 'devextreme-vue/lookup';
import DataSource from "devextreme/data/data_source";
 
export default {
    components: {
        DxLookup
    },
    data() {
        return {
            products: new DataSource({
                store: {
                    type: "odata",
                    url: "https://js.devexpress.com/Demos/DevAV/odata/Products",
                    key: "Product_ID"
                },
                filter: ["Product_Available", "=", true]
            })
        };
    }
}
</script>

DevExtreme Vue - OData Service

See Also