前提・実現したいこと
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
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。