左側メニュー>構築>Firestore Database>データベースの作成
今回はテストモードで開始する｡
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>test</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div id="app"> <select type="text" v-model="selected"> <option>a</option> <option>b</option> </select> <input type="text" v-model="textVal"> <button @click="do_post">登録</button> <button @click="do_get">取得</button> <table> <tr v-for="x in lists"> <td>{{ x.fields.a.stringValue }}</td> <td>{{ x.fields.b.stringValue }}</td> </tr> </table> </div> <script> let v = new Vue({ el: "#app", data: { selected:"", textVal:"", lists:[] }, methods:{ do_get(){ // データ取得 axios .get("https://firestore.googleapis.com/v1/projects/[project id]/databases/(default)/documents/[collection]") .then(response=>{ this.lists = response.data.documents; console.log(response.data.documents); }); }, do_post(){ // データ登録 axios .post("https://firestore.googleapis.com/v1/projects/[project id]/databases/(default)/documents/[collection]",{ fields:{ a:{ stringValue:this.selected }, b:{ stringValue:this.textVal } } }) .then(response=>{ console.log(response); }) .catch(error=>{ console.log(error); }); } } }); </script> </body> </html> |