Vue Funnel - Update Data

DevExtreme DataSource

NOTE
This technique requires the key specified in the store.

To get the DataSource instance, call the Funnel's getDataSource() method:

App.vue
  • <template>
  •     <DxFunnel :ref="funnelRefKey">
  •         <!-- ... -->
  •     </DxFunnel>
  • </template>
  •  
  • <script>
  • import DxFunnel from 'devextreme-vue/funnel';
  •  
  • const funnelRefKey = "my-funnel";
  •  
  • export default {
  •     components: {
  •         DxFunnel
  •     },
  •     data() {
  •         return {
  •             funnelRefKey
  •         }
  •     },
  •     methods: {
  •         getDataSource: function() {
  •             return this.funnel.getDataSource();
  •         }
  •     },
  •     computed: {
  •         funnel: function() {
  •             return this.$refs[funnelRefKey].instance;
  •         }
  •     }
  • }
  • </script>

Then, access the underlying store with the store() method, and call the store's push(changes) method to modify data. The Funnel will be updated automatically.

JavaScript
  • getDataSource().store().push([
  •     { type: "update", key: "Oranges", data: { count: 10 } },
  •     { type: "remove", key: "Apples" }
  • ]);
See Also

JavaScript Array