javascript - VueFire 监视空数组属性

Question

为我的问题寻找解决方案！

我尝试让 Vue.Draggable 与 VueFire 一起工作。我有一些带有卡片的列表，可以在它们之间拖动、排序、克隆等等。虽然列表中填充了卡片，但 Vue.Draggable 可以完美运行，它会监视变化，触发魔法等事件。

这是工作的 JSON：

categories: [{
  name: "todo",
  cards: ["second","first","second"]
},{
  name: "doing"
  cards: ["first","fourth","second"]
},{
  name: "done",
  cards: ["second", "fourth","first","third"]
}]

当列表中的一个为空时，问题就来了。我们都知道 Firebase 不存储空属性，这就是为什么 Vue.Draggable 不能监视不存在的属性。例如像这样：

categories: [{
  name: "todo",
  cards: ["second","first","second"]
},{
  name: "doing"
  // missing cards property because it's empty
},{
  name: "done",
  cards: ["second", "fourth","first","third"]
}]

该cards属性应该通过将项目拖动到列表中来填充值，但是由于cards不存在 Vue.Draggable 无法监视该列表中的更改并且无法触发事件。

有没有办法创建某种占位符或中间件来模拟那个空数组？或者在这种情况下还有哪些其他可能的解决方案？

这是一个小的JSFiddle。

谢谢！

Answer 1

cards如果firebase没有返回任何内容，为什么不初始化属性？

categories: [{
  name: "todo",
  cards: ["second","first","second"]
},{
  name: "doing",
  cards: firebaseCollectionProperty || []
},{
  name: "done",
  cards: ["second", "fourth","first","third"]
}]