Vue Lookup - Array Only

Bind the Lookup to an array by passing it to the dataSource property. The array may contain primitive values...


<template>
    <DxLookup :data-source="products"/>
</template>
 
<script>
import 'devextreme/dist/css/dx.light.css';
 
import { DxLookup } from 'devextreme-vue/lookup';
 
export default {
    components: {
        DxLookup
    },
    data() {
        return {
            products: ['HD Video Player', 'SuperHD Video Player', 'SuperPlasma 50', 'SuperLED 50']
        };
    }
}
</script>

... or objects.


<template>
    <DxLookup
        :data-source="products"
        value-expr="price"
        display-expr="name"
    />
</template>
 
<script>
import 'devextreme/dist/css/dx.light.css';
 
import { DxLookup } from 'devextreme-vue/lookup';
 
export default {
    components: {
        DxLookup
    },
    data() {
        return {
            products: [
                { name: 'HD Video Player', price: 100 },
                { name: 'SuperHD Video Player', price: 420 },
                { name: 'SuperPlasma 50', price: 1500 },
                { name: 'SuperLED 50', price: 200 }
            ]
        };
    }
}
</script>

You can create a Query if objects in an array need to be processed (sorted, filtered, grouped, etc.). For example, in the following code, a Query sorts objects in the products array by the price field in descending order:


<template>
    <DxLookup
        :data-source="getSortedProducts()"
        value-expr="price"
        display-expr="name"
    />
</template>
 
<script>
import 'devextreme/dist/css/dx.light.css';
 
import { DxLookup } from 'devextreme-vue/lookup';
import query from "devextreme/data/query";
 
export default {
    components: {
        DxLookup
    },
    data() {
        return {
            products: [
                { name: 'HD Video Player', price: 100 },
                // ...
            ]
        };
    },
    methods: {
        getSortedProducts () {
            return query(this.products)
                .sortBy("price", true)
                .toArray();
        }
    }
}
</script>

Vue Lookup - Array Only

See Also