はじめに
Firebase × Vue.jsでアプリを作っていたら、データが登録できなくて焦ったが解決した。
環境の情報
OS
macOS Big Sur 11.3
注意
最新の状態を確認して下さい。
参考さまはこちら
最終更新日
2023年7月12日
環境
nodeなど
$ node -v
v18.0.0
$ npm -v
8.6.0
状況
index.htmlで以下のように書くも特に登録されない。
表示に問題はない。
コマンドにエラーはない。
クリックはできるが無言。
import { getAnalytics } from "https://www.gstatic.com/firebasejs/9.8.2/firebase-analytics.js";
import { getDatabase, ref, set, onValue, push } from "https://www.gstatic.com/firebasejs/9.8.2/firebase-database.js";
const firebaseConfig = {
apiKey: "自分の値",
authDomain: "自分の値",
projectId: "自分の値",
storageBucket: "自分の値",
messagingSenderId: "自分の値",
appId: "自分の値",
measurementId: "自分の値"
};
const app = initializeApp(firebaseConfig);
const database = getDatabase(app);
const analytics = getAnalytics(app);
Vue.component('board-list', {
template: '<li class="board-list"><div class="board-list__upper">名前:{{name}}{{date}}</div>{{message}}</li>',
props: ['name', 'message', 'date', 'id'],
})
Vue.component('board-form', {
template: '<div class="form-area">名前 : <input v-model="name"> </br>コメント: \
<textarea v-model="message"></textarea> </br><button v-on:click="doAdd">書き込む</button></div>',
data: function () {
return {
message: '',
name: ''
}
},
methods: {
doAdd: function () {
this.$emit('input', this.name, this.message)
this.message = ''
this.name = ''
}
}
})
var board = new Vue({
el: '#board',
data: {
lists: []
},
created: function () {
var vue = this;
const starCountRef = ref(database, 'board');
onValue(starCountRef, (snapshot) => {
vue.lists = snapshot.val();
console.log(snapshot.val())
});
},
methods: {
doAdd: function (name, message) {
var now = new Date();
push(ref(database, 'board'), {
name: name,
message: message,
date: now.getMonth() + 1 + '月' + now.getDate() + '日' + now.getHours() + '時' + now.getMinutes() + '分'
});
}
}
})
</script>
</head>
<body>
<div id="board">
<h2 class="board-title">掲示板</h2>
<ul class="lists" style="list-style-type: none">
<board-list v-for="(list, key) in lists" :key="key" :name="list.name" :message="list.message"
:date="list.date">
</board-list>
</ul>
<board-form v-on:input="doAdd"></board-form>
</div>
</body>
</html>
盲点
ブラウザのコンソールから。
Repo.ts:857 Uncaught (in promise) Error: PERMISSION_DENIED: Permission denied
書き込み等権限
こちらへ変える必要があった。
Firebaseの方の設定でした。
{
"rules": {
".read": true,
".write": true
}
}
終わり
登録できるようになったよ！やったね！