Seeking a resolution to my current issue!
I am attempting to integrate Vue.Draggable with VueFire. I have multiple lists with draggable cards that can be moved between them, sorted, duplicated, and more. When the lists have cards populated, Vue.Draggable functions perfectly, monitoring changes and triggering events flawlessly.
Here is an example of working JSON:
categories: [{
name: "todo",
cards: ["second","first","second"]
},{
name: "doing"
cards: ["first","fourth","second"]
},{
name: "done",
cards: ["second", "fourth","first","third"]
}]
The problem arises when one of the lists is empty. Since Firebase does not store empty properties, Vue.Draggable cannot monitor a non-existent property. For instance, like this:
categories: [{
name: "todo",
cards: ["second","first","second"]
},{
name: "doing"
// missing cards property because it's empty
},{
name: "done",
cards: ["second", "fourth","first","third"]
}]
The cards property needs to be populated by dragging items to the list. However, due to cards not being present, Vue.Draggable cannot track changes in that list or trigger events.
Is there a way to create a placeholder or intermediary solution to mimic an empty array? Or what other potential solutions exist in this scenario?
Check out the small JSFiddle for reference.
Thank you!