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

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

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

VueFire监视空数组属性

1 个答案: