DevExtreme Vue - Update Data

DevExtreme DataSource

DevExtreme Data Layer components can perform two types of data operations: shaping (sorting, filtering, grouping) and modification (creation, update, deletion).

Data Shaping

Data shaping is implemented by the DataSource component and its methods. To call them, use the getDataSource() method to get a DataSource instance from your UI component. Alternatively, you can use a standalone instance saved in a constant/component property when you created the DataSource.

NOTE
The getDataSource().load() method re-renders the component. To avoid this behavior, use getDataSource().store().load() instead.

The following code obtains a DataSource instance using both approaches and calls one of the data shaping methods—filter(filterExpr). Such methods only set up data shaping settings. To apply them, the load() method is called.

  • Using a standalone DataSource instance

    App.vue
    • <template>
    • <!-- ... -->
    • </template>
    • <script>
    • import DataSource from 'devextreme/data/data_source';
    • const dataSource = new DataSource({
    • // ...
    • // DataSource is configured here
    • // ...
    • });
    •  
    • export default {
    • data() {
    • return {
    • dataSource
    • }
    • },
    • methods: {
    • filter() {
    • dataSource.filter(['age', '>', 18]);
    • dataSource.load();
    • }
    • }
    • }
    • </script>
  • Getting a DataSource instance from the UI component (DataGrid here)

    App.vue
    • <template>
    • <DxDataGrid ...
    • ref="myDataGrid">
    • </DxDataGrid>
    • </template>
    •  
    • <script>
    • import 'devextreme/dist/css/dx.light.css';
    • import DxDataGrid from 'devextreme-vue/data-grid';
    •  
    • export default {
    • components: {
    • DxDataGrid
    • },
    • data() {
    • return {
    • // ...
    • }
    • },
    • methods: {
    • filter() {
    • const dataSource = this.$refs['myDataGrid'].instance.getDataSource();
    • dataSource.filter(['age', '>', 18]);
    • dataSource.load();
    • }
    • }
    • }
    • </script>

Data Modification

Data modification is implemented by the store and its methods. To call them, you need a store instance that you can get using the DataSource's store() method.

Stores provide three data modification methods: insert(values), update(key, values), and remove(key). Use them to edit local and remote data. Call the DataSource's reload() method afterwards to update data in the DataSource.

App.vue
  • <template>
  • <!-- ... -->
  • </template>
  • <script>
  • import DataSource from 'devextreme/data/data_source';
  • const dataSource = new DataSource({
  • // ...
  • });
  •  
  • export default {
  • // ...
  • mounted() {
  • const store = dataSource.store();
  • store.insert({ id: 1, name: "John Doe" })
  • .then(
  • (dataObj) => {
  • dataSource.reload();
  • },
  • (error) => { /* ... */ }
  • );
  •  
  • store.update(1, { name: "John Smith" })
  • .then(
  • (dataObj) => {
  • dataSource.reload();
  • },
  • (error) => { /* ... */ }
  • );
  •  
  • store.remove(1)
  • .then(
  • (key) => {
  • dataSource.reload();
  • },
  • (error) => { /* ... */ }
  • );
  • }
  • }
  • </script>
See Also

Local Array

Ensure that one- or two-way binding is used to bind the dataSource property to the array. In Vue 2 applications, use standard methods to change the array. This updates the UI component automatically. In Vue 3 applications, create a new array and assign it to the data-bound property to replace the previous array:

App.vue
  • <template>
  • <DxChart ...
  • :data-source="fruits">
  • </DxChart>
  • </template>
  •  
  • <script>
  • import DxChart from 'devextreme-vue/chart';
  •  
  • export default {
  • components: {
  • DxChart
  • },
  • data() {
  • return {
  • fruits: [
  • { fruit: 'Apples', count: 10 },
  • { fruit: 'Oranges', count: 12 },
  • { fruit: 'Lemons', count: 15 }
  • ]
  • }
  • },
  • methods: {
  • addPineapple() {
  • // Vue 2
  • this.fruits.push({ fruit: 'Pineapples', count: 3 });
  •  
  • // Vue 3
  • this.fruits = [...this.fruits, { fruit: 'Pineapples', count: 3 }];
  • }
  • }
  • }
  • </script>
See Also