10.vue.jsとfirebaseでランキングつき連打ゲーム:index.html

差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

--- 10.vue.jsとfirebaseでランキングつき連打ゲーム:index.html [2018/12/28] – [forEach文のコールバック関数] adash333
+++ 10.vue.jsとfirebaseでランキングつき連打ゲーム:index.html [2018/12/31] (現在) – [0.用意するもの（開発環境）] adash333
@@ 行 39: / 行 39: @@
 <code>
 CodeSandbox
-Firebase
+Firebase (real time databse)
 Vue 2.5.2
 Vuetify
@@ 行 346: / 行 346: @@
 今回のコードで、一番難しいところ。
 ここは、https://qiita.com/renowan/items/b8222f2b873cc29a462d　のコードをコピペしたのですが、詳しいところはさっぱりわかりません。
 <code>
@@ 行 373: / 行 379: @@
 </code>
+以下のコードでもよい？
+https://ueqareer.net/2770/3
+<code>
+   <!-- todoの一覧表示 -->
+    <ul v-for="(todo, key) in filteredTodos" :key="todo.id">
+      <li><input class="toggle" type="checkbox" v-model="todo.isComplete" v-on:click="updateIsCompleteTodo(todo, key)">{{ todo.name }}</li>
+      <button type="submit" v-on:click="deleteTodo(key)">削除</button>
+    </ul>
+</code>
+<code>
+  created: function() {
+    this.database = firebase.database();
+    this.uid = firebase.auth().currentUser.uid;
+    this.todosRef = this.database.ref("todos/" + this.uid);
+    var _this = this;
+    // データに変更があると実行されるfunction
+    this.todosRef.on("value", (snapshot) => {
+      this.todos = snapshot.val(); // 再取得してtodosに格納する
+    });
+  },
+</code>
 ==== FirebaseのRTDBのobjectをarrayに変換する ====
@@ 行 414: / 行 449: @@
 これを、listという配列arrayに変換する。
+<wrap hi>結局、object{ }の中身のvalueを並べて、[ ]でくくった配列arrayにしているのだと解釈しました。</wrap>
+（間違っていたらすみません、、、）
 https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/keys
@@ 行 457: / 行 493: @@
 年02月21日に更新
 JSのObjectをforEachで処理する方法
+https://chaika.hatenablog.com/entry/2016/06/21/085000
+-06-21
+Javascript 連想配列(オブジェクト)をforEachでループさせたい。

10.vue.jsとfirebaseでランキングつき連打ゲーム/index.html.1546014884.txt.gz · 最終更新: 2018/12/28 by adash333