11.vue.jsとfirebaseで画像アップローダー:index.html

差分

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

この比較画面へのリンク

--- 11.vue.jsとfirebaseで画像アップローダー:index.html [2019/01/01] – [方針をたてる] adash333
+++ 11.vue.jsとfirebaseで画像アップローダー:index.html [2020/04/19] (現在) – [方針をたてる] adash333
@@ 行 1: / 行 1: @@
 ====== 11.Vue.jsとFirebaseで画像アップローダー ======
-作成中
+Vue.jsとFirebaseを用いて、画像アップローダーを作ってみたいと思います。
+FirebaseのCloud Firestorageに複数の画像を保存します。しかし、直接その一覧をとってくることができないため、画像を保存する段階で、あらかじめ、Firestoreに画像のアドレスを保存しておく必要があるため、ややこしいコードになっています。
+===== 2019/8/13時点、動きません。 =====
+<del>Vuefireのためか、Vuetifyのせいなのか、動きません。</del>
+→動くようになりましたが、vuefireとVuetifyを勉強しなおす必要がありそうです。たった1年で、すぐにプログラムが動かなくなってしまうのは、かなりへこみます。
+https://qiita.com/mugi_chan_tea/items/5726019da614ae322dd3
+@mugi_chan_tea
+年06月22日に投稿
+Vuefireが無いエラー【Vue.jsとfirebaseの環境構築】
+<code>
+import { firestorePlugin } from 'vuefire'
+Vue.use(firestorePlugin)
+</code>
+https://qiita.com/rerere0101/items/7c17f320a4583f1d2c2e
+@rerere0101
+年04月18日に更新
+Vuetifyを使ってToDoアプリをちょっとかっこよくする
+https://github.com/vuetifyjs/vuetify/issues/6895
+さらに、上記サイトを参考にしてmain.jsに以下を追加したら動きました。
+<code>
+const vuetifyOptions = { }
+Vue.use(Vuetify)
+new Vue({
+  el: '#app',
+  vuetify: new Vuetify(vuetifyOptions)
+})
+</code>
+Vuetifyのツールバー（ヘッダー）が、
+<v-toolbar color="indigo" dark fixed app></v-toolbar>
+から、
+<v-app-bar app color="indigo" dark></v-app-bar>
+に変更に。
 ===== 方針をたてる =====
@@ 行 28: / 行 70: @@
 </html>
+現在、firebaseの方でwriteできないように設定しています。
@@ 行 44: / 行 87: @@
 CodeSandbox
 Firebase (Cloud Firestore, Cloud Storage)
 Vue 2.5.2
 Vuetify
 firebase
+vuefire 2.0.0-alpha.6
 </code>
@@ 行 82: / 行 127: @@
 <html>
-https://gist.github.com/adash333/ce1bfe3a37314508daa0093afdc3a665
+<script src="https://gist.github.com/adash333/ce1bfe3a37314508daa0093afdc3a665.js"></script>
 </html>
@@ 行 93: / 行 138: @@
 <code>
 data: {
-    photo: null,
-    photo_url: null
 },
 </code>

11.vue.jsとfirebaseで画像アップローダー/index.html.1546355749.txt.gz · 最終更新: 2019/01/01 by adash333