Как получить идентификатор определенного узла дерева, когда я нажимаю на них, а затем передаю эти данные в мою переменную - PullRequest
Новая
       8

Как получить идентификатор определенного узла дерева, когда я нажимаю на них, а затем передаю эти данные в мою переменную

0 голосов
/ 14 сентября 2018

Я новичок в Квазаре и Вью. Может ли кто-нибудь объяснить мне, как решить мою задачу?

Кратко о задании:

(1) У меня есть элемент q-tree, который представляет структуру папок в левой части экрана [ref.1]

(2) Вот структура папок [ref.2]

(3) Когда пользователь щелкает по любому элементу в этой структуре папок, он видит справа новый компонент со всеми дочерними элементами, выбранными по одному в сетке.

Это то, что у меня есть сейчас.

[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'}
        ]
      }
    ]
}
]

Ответы [ 2 ]

0 голосов
/ 29 января 2019

Итак, основная проблема была связана с недостаточно хорошим знакомством с квазар-фреймворком.Вот мой ответ на этот вопрос: 

<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>
0 голосов
/ 05 октября 2018

вам нужно заменить идентификатор ключом. После этого добавьте этот обработчик для каждого узла 

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

, затем добавьте этот метод в методы 

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

это будет отображать идентификатор узла перкуляра

...