Vue Lookup - Access the DataSource

Regardless of the data source you use, the Lookup always wraps it in a DataSource. Call the getDataSource() method to get the instance of the DataSource.

jQuery
JavaScript
const lookupDataSource = $("#lookupContainer").dxLookup("getDataSource");
Angular
TypeScript
import { DxLookupModule, DxLookupComponent } from "devextreme-angular";
// ...
export class AppComponent {
    @ViewChild(DxLookupComponent, { static: false }) lookup: DxLookupComponent;
    // Prior to Angular 8
    // @ViewChild(DxLookupComponent) lookup: DxLookupComponent;
    lookupDataSource = this.lookup.instance.getDataSource();
}
@NgModule({
     imports: [
         // ...
         DxLookupModule
     ],
     // ...
 })
Vue
<template>
    <DxLookup ...
        ref="lookup"
    />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import { DxLookup } from 'devextreme-vue/lookup';

export default {
    components: {
        DxLookup
    },
    methods: {
        getDataSource() {
            this.ds = this.$refs.lookup.instance.getDataSource();
        }
    }
}
</script>
React
import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import { Lookup } from 'devextreme-react/lookup';

class App extends React.Component {
    constructor(props) {
        super(props);

        this.lookupRef = React.createRef();

        this.getDataSource = this.getDataSource.bind(this);
    }

    getDataSource() {
        this.ds = this.lookupRef.current.instance().getDataSource();
    } 

    render() {
        return (
            <Lookup ...
                ref={this.lookupRef}
            />
        );
    }
}

export default App;

Now, you can call any method the DataSource exposes. For example, you can reload data using the reload() method.

JavaScript
lookupDataSource.reload();
See Also