質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

375閲覧

firebase real databaseから読み込んだものを編集したい

ayousanz

総合スコア258

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2020/01/08 16:31

編集2020/01/10 14:27

前提・実現したいこと

vue.js,firebaseのreealdatabaseでタスク管理を作っています.
その中で,createdのなかで,firebaseからデータを取得しています.

javascript

1created() { 2 firebase.initializeApp(firebaseConfig); 3 var vue = this; 4 firebase.database().ref('/').on('value', function (snapshot) { 5 vue.lists = snapshot.val(); 6 }); 7 },

その後で,mountedのなかで取得したデータに対しての操作を行いたいと考えております.

javascript

1mounted() { 2 this.change_data(); 3 }, 4 5methods: { 6 change_data: function () { 7 for (var key in this.lists) { 8 以下でlistsの中にあるデータに変更や他の関数に受け渡しなどをしたい 9 var item = this.lists[key]; 10 this.temp = item; 11 console.log(item); 12 } 13 } 14 },

mountedのなかでこのlistsの中身を取得したり,変更したりしたいと思っています.

発生している問題・エラーメッセージ

console.logの中身が空白で表示される.

該当のソースコード

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <!-- Semantic UI を読み込む --> 8 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui-css@2.4.1/semantic.min.css"> 9 <!-- The core Firebase JS SDK is always required and must be listed first --> 10 <script src="https://www.gstatic.com/firebasejs/7.6.1/firebase-app.js"></script> 11 <script src="https://www.gstatic.com/firebasejs/7.6.1/firebase-auth.js"></script> 12 <script src="https://www.gstatic.com/firebasejs/7.6.1/firebase-database.js"></script> 13 <title>Document</title> 14</head> 15<body> 16 <div class="ui main continer"> 17 <div id="app"> 18 <table class="ui celled table"> 19 <thead> 20 <tr> 21 <th>題名</th> 22 <th>lat</th> 23 <th>lng</th> 24 <th>削除</th> 25 </tr> 26 </thead> 27 <tbody> 28 <tr v-for="(item,key) in lists"> 29 <td>{{item.name}}</td> 30 <td>{{item.lat}}</td> 31 <td>{{item.lng}}</td> 32 <td> 33 <button class="ui button" v-on:click="remove_data(key)">削除</button> 34 </td> 35 </tr> 36 </tbody> 37 </table> 38 <div class="ui input"> 39 <input type="text" placeholder="題名" v-model="name"> 40 <input type="text" placeholder="コメント" v-model="comment"> 41 </div> 42 <button class="ui button" v-on:click="add_data(name,comment)">追加</button> 43 ここにtempが入る[{{temp}}] 44 </div> 45 </div> 46 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 47 <script src="./config.js"></script> 48 <script src="./main.js"></script> 49</body> 50</html>

javascript

1new Vue({ 2 el: "#app", 3 data: { 4 lists: [], 5 name: null, 6 comment: null, 7 temp:null 8 }, 9 created() { 10 firebase.initializeApp(firebaseConfig); 11 var vue = this; 12 firebase.database().ref('/').on('value', function (snapshot) { 13 vue.lists = snapshot.val(); 14 }); 15 }, 16 mounted() { 17 this.change_data(); 18 }, 19 methods: { 20 add_data: function(name,comment){ 21 firebase.database().ref('/').push({ 22 name: name, 23 comment:comment 24 }); 25 this.name = ''; 26 this.comment = ''; 27 }, 28 remove_data: function (key) { 29 firebase.database().ref('/').child(key).remove(); 30 }, 31 change_data: function () { 32 for (var key in this.lists) { 33 var item = this.lists[key]; 34 this.temp = item; 35 console.log(item); 36 } 37 } 38 }, 39})

試したこと

createdやmountedのなかで,console.logを使い変数の中身を確認した

補足情報(FW/ツールのバージョンなど)

semantic ui 2.4.1
Vue.js 最新(2.6.11)
firebase 7.6.1

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

Vue.jsでFirebaseを始めよう 5.リストを表示させる編
を参考にして,firebaseを初期化している関数の中で,google mapを描写する関数に引数で値を渡すことで,読み込むことができました.

投稿2020/01/12 11:36

ayousanz

総合スコア258

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問