-
作るもの
-
Realtime Databaseの設定例
vue.js
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<meta charset="UTF-8">
</head>
<body>
<div id="app">
<input type="text" v-model="text1">
<input type="button" @click="put()" value="PUT">
<table border="1" v-if="items">
<tr v-for="(item, i) in items">
<td>{{ item.name }}</td>
<td><input type="button" @click="del(i)" value="DELETE"></td>
<td><input type="button" @click="update(i)" value="PUT"></td>
</tr>
</table>
</div>
</body>
</html>
<script>
const baseUrl ='https://test-0000.firebaseio.com/'; // Realtime DatabaseのURLを設定
const app = new Vue({
el: '#app',
data: {
text1: '',
items: []
},
mounted() {
this.find();
},
methods: {
async find() {
const url = baseUrl + '.json';
const res = await axios.get(url);
this.items = res.data;
console.log(111, res.data);
},
async put() {
const url = baseUrl + Date.now() + '.json';
const params = { name: this.text1 };
const res = await axios.put(url, params);
this.find();
},
async update(i) {
const url = baseUrl + i + '.json';
const params = { name: this.text1 };
const res = await axios.put(url, params);
this.find();
},
async del(i) {
const url = baseUrl + i + '.json';
const res = await axios.delete(url);
this.find();
},
}
})
</script>