maximum attachment about sl-vue-tree HOT 2 CLOSED

Hi. You can restore previous value in the @input handler if the new one is not something that you expected.

      <sl-vue-tree
          v-model="nodes"
          ref="slVueTree"
          @input="onInputHandler"
      />

new Vue({
    el: '#app',
    components: { SlVueTree },
    data: function () {
     return {
       nodes: nodes,
       prevNodes:  this.cloneDeep(nodes)
     }
    },
 methods: {


      onInputHandler(newNodes) {
        let slVueTree = this.$refs.slVueTree;
        let limitReached = false;
        let childrenLimit = 3;

        slVueTree.traverse((node) => {
          if (node.children.length > childrenLimit) limitReached = true;
        });

        if (limitReached) {
          alert('Limit is reached');
          this.nodes = this.cloneDeep(this.prevNodes);
          return;
        }

        this.prevNodes = this.cloneDeep(newNodes);
      },

      cloneDeep(obj) {
        return JSON.parse(JSON.stringify(obj))
      }
 }
})

from sl-vue-tree.

Regarding the example above, it's important to add the once modifier to the @input attribute, otherwise, onInputHandler will likely be called TWICE for every node drop. It seems that at least one of the following event listeners also triggers an input event:

<sl-vue-tree
        v-model="nodes"
        ref="slVueTree"
        @select="onSelectHandler"
	@drop="onDropHandler"
	@toggle="onToggleHandler"
	@nodecontextmenu="onNodecontextmenuHandler"
	@input.once="onInputHandler"
      />

Obviously, it would be great to have full-bodied support for both node drag and node drop validation. New API methods for allowDrag and allowDrop, when returning false, should do all the work of preventing a node drag or drop, including displaying a not-allowed mouse cursor.

I'm going to wind up having to roll my own solution for this. Once I get it up and running, I'll share.

from sl-vue-tree.