How to get selected Node data

Hi!

Thanks for your wonderfull library.

I see in src/lib/Node.js that events are emitted when a node is selected. How would I listen to that event to dynamically display the nodes data object into a Div?

If selectedNodeInfo() is run every time a node gets selected then this would work :

<template>
  <div>
    <LiquorTree :data="dirTree" :options="treeOptions" ref="tree"/>
    <div >{{selected}}</div>
  </div>
</template>

<script>
  import LiquorTree from 'liquor-tree'
  import axios from 'axios'
  export default {
    name: "resourceTree",
    components: {
      LiquorTree
    },
    data() {
      return {
        dirTree: this.getDirPaths(),

        // This property should contain the selected node's Object.
        selected : {},
        treeOptions: {
          propertyNames: {
            text: 'name',
            children: 'children'
          }
        }
      }
    },
    created() {
        this.getDirPaths()
    },
    methods : {
      getDirPaths() {
        return axios.get("http://localhost:9090/fragpaths")
          .then(response => response.data)
      }
    },
    selectedNodeInfo() {
    this.selected = this.$refs.tree.findAll({state: { selected: true } })
    }
  }
</script>

<style scoped>

</style>

[amsik]

Hi! Thank for using the library 😃

I had some thought about v-model and checkboxes. You can update library and check it out or CDN (https://cdn.jsdelivr.net/npm/liquor-tree@0.2.15/dist/liquor-tree.umd.js) Also I’ve added examples (npm run dev and open Checkboxes page).

For your example:

<div id="app">
  <pre v-if="treeModel && treeModel.selected">
    {{ treeModel.selected.map(el => el.text) }}
    </pre>
  <pre v-if="treeModel">
    {{ treeModel.checked.map(el => el.text) }}
    </pre>
    <tree
      ref="tree"
      :data="treeData"
      :options="treeOptions"
      v-model="treeModel"
    />
  </div>
<script>
    new Vue({
      el: '#app',
      data: function() {
        return {
          treeModel:  null,
          treeData: [
            { text: 'Item 1', state: { checked: false } },
            { text: 'Item 2', state: { checked: true }, children: [
            	{ text: 'Item 2.1', state: { checked: true } },
                { text: 'Item 2.2', state: { checked: true } },
                { text: 'Item 2.3', state: { checked: false } }
            ]},
            { text: 'Item 3', state: { checked: true } },
            { text: 'Item 4', state: { checked: true } }
          ],
          treeOptions: {
          	checkbox: true,
          }
        }
      }
    })
</script>

[abhion]

How do I get indeterminate nodes too?