Vue Lookup - JSON Data

Load JSON data by assigning its URL to the dataSource property.


<template>
    <DxLookup
        data-source="https://jsonplaceholder.typicode.com/users"
        value-expr="username"
        display-expr="name"
    />
</template>
 
<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';
 
import { DxLookup } from 'devextreme-vue/lookup';
 
export default {
    components: {
        DxLookup
    }
}
</script>

Note that you can also use a JSONP callback parameter supported by jQuery.ajax().


<template>
    <DxLookup ...
        data-source="http://www.example.com/dataservices/jsonpdata?callback=?"
    />
</template>
 
<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';
 
import { DxLookup } from 'devextreme-vue/lookup';
 
export default {
    components: {
        DxLookup
    }
}
</script>

Implement the CustomStore if you need to process data after obtaining it. See the Custom Sources topic for more details.

Vue Lookup - JSON Data

See Also