vue.js+Firebase+vue.draggableな連携

vue.draggableとFirebaseを組み合わせてみました。
みなさまvue.draggable紹介してくれているんですけど、DBに保存するところまで書いてくれていないんですよね。。。決まったデータに要素追加してそこでの動きだけ見て終わり。な記事はたくさんあるんですけど、やりたいのはオンラインに保存するところ。

というわけで、ちょちょいとかいてみました。

  import draggable from 'vuedraggable'

してスタート。

あとは、ボードの内容が変わったタイミングで、Firebaseのaddかupdateを実行するだけ。以上です。watchとかにぶち込んでおきましょう。いかのような感じで。

  <draggable class="list-group" element="ul" v-model="list" 
   :options="dragOptions" :move="onMove" @start="isDragging=true" 
   @end="isDragging=false">


  watch: {
     isDragging(newValue) {

localstorageに保存してもいいんですが、まぁ、処理はどっちかに絞りたい。。。のでFirebaseによせましょう。ちなみに条件分岐がけっこう手間かかる。。。

はまった個所：
・firebaseに登録するときは、ボードの情報をまるっと文字列で保存するべし。Jsonstringify便利。
・文字列をJSON.parseし、arrayとしてに流し込む。
・firebaseにデータがあるかないかでupdateを実行したいがタイミングを間違うと、ドキュメントが重複登録される。ここはconsole.logを打ちまくってどのタイミングでどう動いているのかを把握すべし。

それでは良きVueライフを～ ^o^