how to update data?

[mohammad-zr]

Is there anyway to refresh async data? i try with :data="getDataAsync" but not work. i don't know how to do this with options. it works just once with options but i want when user clicks a button refresh data...

[amsik]

Check this link: https://amsik.github.io/liquor-tree/#Integration-with-Vuex

[mohammad-zr]

@amsik thanks. is it possible without vuex and store?

[mohammad-zr]

i have another question too.
if we have a list of id. for example ["1", "2", "3"] how we can find them and check their checkboxes? i see find and findAll but i don't know how to pass criteria to get items with id: 1, 2, 3

[amsik]

You don't have to use Vuex. It is a way to control the tree's data.

options: {
      store: {
        store: Store,
        getter: () => {
          return this._myTree
        },
        dispatcher(tree) {
          this._myTree = tree
        }
      }
}

[amsik]

It's not possible to pass or condition. You have to do something like:

  const nodes = ['1', '2', '3'].map(id => this.$refs.tree.find({ id: id}) )

[mohammad-zr]

You don't have to use Vuex. It is a way to control the tree's data.

options: {
      store: {
        store: Store,
        getter: () => {
          return this._myTree
        },
        dispatcher(tree) {
          this._myTree = tree
        }
      }
}

It doesn't work because we don't have access to this._myTree inside getter and dispatcher

treeData: any[] = [];

  treeOptions = {
    checkbox: true,
    store: {
      store: Store,
      getter() {
        return this.treeData;
      },
      dispatcher(tree: any) {
        this.treeData = tree
      }
    }
  };

[amsik]

You can use arrow functions

[geri777]

You don't have to use Vuex. It is a way to control the tree's data.

@amsik Could you please explain HOW you control the data without using Vuex? You show code using a Store, don't you? Please show a code sample with a classic data model. Thanks!

[louismorgner]

I faced the same issue that the :data prop you pass into the liquor tree would not reactively update when the tree gets edited. The workaround I used is to place event handlers on the tree like so:

<tree
      :data="treeData"
      ref="tree"
      :options="treeOptions"
      @node:dragging:finish="updateTree($event)"
      @node:editing:stop="updateTree($event)"
      @node:added="updateTree($event)"
      @node:removed="updateTree($event)"
 >

The updateTree() method then could access the update tree through the node that is emitted by the event like so:

updateTree(e) {
      let updatedTree = e.tree.model;
}

From this point on you could either update the local state of your vue component or do whatever you want with the updated tree data.

As a final touch, you can use this recursive function as a starting point to transform the data you get from e.tree.model to whatever structure you might need:

transformTreeModelToArray(treeData) {

      // Recursive function that helps you transform the data from e.tree.model to whatever you want
      function iterate(array) {
        const updatedArray = [];
        array.forEach((o) => {
          const children = iterate(o.children); // This is important to follow the children down to any level
          updatedArray.push({ name: o.data.text, id: o.data.id, children }); // Here you can transform the data to your liking. Change needed.
        });
        return updatedArray;
      }

      const updatedArray = iterate(treeData); // Here we store the transformed array created by our own function

      this.$emit("update", updatedArray); // Do whatever you want (e.g. pass it up to a parent component)
}

Of course, this is not a preferred solution and its most likely best to include vuex. However, like in my case, this offers a practical alternative to get the updated data from the tree. Good luck with this solution 👨🏽‍💻