Vue TagBox - Access the DataSource

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

jQuery
JavaScript
const tagBoxDataSource = $("#tagBoxContainer").dxTagBox("getDataSource");
Angular
TypeScript
import { ViewChild, ... } from "@angular/core";
import { DxTagBoxModule, DxTagBoxComponent } from "devextreme-angular";
// ...
export class AppComponent {
    @ViewChild(DxTagBoxComponent, { static: false }) tagBox: DxTagBoxComponent;
    // Prior to Angular 8
    // @ViewChild(DxTagBoxComponent) tagBox: DxTagBoxComponent;
    ds: any = {};
    getDataSource () {
        this.ds = this.tagBox.instance.getDataSource();
    }
}
@NgModule({
     imports: [
         // ...
         DxTagBoxModule
     ],
     // ...
 })
Vue
<template>
    <DxTagBox
        ref="tagBox"
    />
</template>

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

import { DxTagBox } from 'devextreme-vue/tag-box';

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

import { TagBox } from 'devextreme-react/tag-box';

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

        this.tagBoxRef = React.createRef();

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

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

    render() {
        return (
            <TagBox
                ref={this.tagBoxRef}
            />
        );
    }
}

export default App;

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

JavaScript
tagBoxDataSource.reload();
See Also