VueFire 监视空数组属性

Posted 2023-02-22

【中文标题】VueFire 监视空数组属性

【英文标题】：VueFire watch for empty array property

【发布时间】：2019-11-15 09:20:04

【问题描述】：

四处寻找解决我的问题的方法！

我尝试让 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。

谢谢！

【参考方案1】：

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

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