Within Event Handlers
Usually, you need to access a TreeView node when an action was made on it, for example, when it was clicked or selected. This action raises an event, and you can access the node subjected to the action within the event handler.
- <template>
- <DxTreeView
- :data-source="data"
- @item-click="onItemClick"
- />
- </template>
- <script>
- import 'devextreme/dist/css/dx.light.css';
- import { DxTreeView } from 'devextreme-vue/tree-view';
- const data = [ ... ];
- export default {
- components: {
- DxTreeView
- },
- data() {
- return {
- data
- };
- },
- methods: {
- onItemClick(e) {
- const node = e.node;
- // ...
- }
- }
- };
- </script>
Not every event handler provides access to the node, only those whose name starts with onItem.... They are described in the TreeView Configuration.
Using a Method
Call the getNodes() method to get TreeView nodes at any point in the application flow.
- <template>
- <dx-tree-view
- :ref="treeViewRef"
- :items="data"
- />
- </template>
- <script>
- import 'devextreme/dist/css/dx.light.css';
- import { DxTreeView } from 'devextreme-vue/tree-view';
- const treeViewRef = 'treeView';
- export default {
- components: {
- DxTreeView
- },
- data() {
- return {
- data,
- treeViewRef
- };
- },
- computed: {
- treeView: function() {
- return this.$refs[treeViewRef].instance;
- }
- },
- methods: {
- getNodes() {
- return this.treeView.getNodes();
- }
- }
- };
- </script>
All node objects contain a similar set of fields, which are described in the Node documentation section.
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.