Javascript 如何在单击特定树节点时获取其id，然后将该数据传递到我的变量中

我对Quasar和Vue还不熟悉。有人能给我解释一下如何解决我的任务吗

简要介绍任务：

（1） 我有一个q树元素，它代表屏幕左侧的文件夹结构[ref.1]

（2） 这是一个文件夹结构[ref.2]

（3） 当用户单击此文件夹结构中的任何元素时，他将在右侧看到一个新组件，其中包含网格布局中单击的一个元素的所有子元素

这就是我现在拥有的

[ref.1]treeComponent.vue

var文件=要求（“./文件”）
module.exports={
数据：函数（）{
返回{
已选择doc:x，
文件：文件
}
},
方法：{
getId:函数（）{
const x=this.getNodeByKey（'id'））
控制台日志（x）
}
}
}

您需要将id替换为键。在此之后，为每个节点添加此处理程序

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

然后在方法中添加此方法

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

---

这将显示光圈节点的id

因此，主要问题与对类星体框架了解不够有关。 以下是我对这个问题的回答：

<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>

showClickedNode
var文件=要求（“./文件”）
module.exports={
数据：函数（）{
返回{
选中：空，
文件：文件
}
},
方法：{
showNodeSelected:函数（）{
console.log（此.selected）
}
}
}

您可以通过此语句

const x=this.getNodeByKey（'id'）

返回节点吗？不，它不工作。将此

selected.sync=“selectedDoc”

添加到模板中，并在数据对象中添加

selectedDoc:null

否，仍然无效。