当我单击它们时如何获取特定树节点的ID，然后将其传递到变量中

Question

I am new to Quasar and Vue. Could someone explain to me how to solve my task?

Briefly about the task:

(1) I have a q-tree element which represents the folder structure at the left side of a screen [ref.1]

(2) Here is a folder structure [ref.2]

(3) When the user clicks on any element in this folder structure, then he will see a new component on the right side with all children elements of clicked one in a grid layout.

This is what do I have now.

[ref.1] treeComponent.vue

 <template> <q-tree :nodes="documents" @click="getId" node-key="id" > </q-tree> </template> <script> var documents = require('./documents') module.exports = { data: function () { return { selectedDoc: x, documents: documents } }, methods: { getId: function () { const x = this.getNodeByKey('id') consol.log(x) } } } </script> 

[ref.2] documents.js

 module.exports = [ { id: '1', label: 'My Documents', icon: 'folder', children: [ { id: '01', label: 'Dir 1', children: [ { id: '0001', label: 'Doc 1'}, { id: '0002', label: 'Doc 2'} ] }, { id: '02', label: 'Dir 2', children: [ { id: '0003', label: 'Doc 3'}, { id: '0004', label: 'Doc 4'} ] }, { id: '103', label: 'Dir 3', children: [ { id: '0005', label: 'Doc 5'}, { id: '0006', label: 'Doc 6'}, { id: '0007', label: 'Doc 7'} ] } ] } ] 

Answer 1

you need to replace id by key.after this add this handler for each node

handler: (node) => this.onclick(node)

then add this method in methods

onclick(node) {
  alert(node.key)
},

this will display id of perticular node

Answer 2

So, the main problem was related to not good enough acquainted with Quasar framework. Here is my answer to this question:

<template>
  <button v-on:click = "showNodeSelected">showClickedNode</button>
  <q-tree
    :nodes = "documents"
    :selected.sync = "selected"
    node-key="id"
  />
</template>

<script>
var documents = require('./documents')
module.exports = {
  data: function () {
    return {
      selected: null,
      documents: documents
    }
  },
  methods: {
    showNodeSelected: function () {
      console.log(this.selected)
    }
  }
}
</script>