Closed LusenkoSasha closed 6 years ago
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))
}
}
})
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.
how to set the maximum attachment for each element?