投稿2021/06/01 06:10
編集2021/06/01 10:46現在、スプレッドシートをDB代わりに使用するWEBアプリを作成しております。
その中の一つに、WEB画面上にテーブルの一覧を表示させ、更新、追加する機能を実装しております。
更新する処理は実装できたのですが、新規追加がまだできておりません。
pushメソッドを使用することで行を追加することができたのですが、上記テーブル要素をそのまま複製したような行が追加され、Buttonの中身を変更することができませんでした。
公式リファレンスを読んだのですが、pushメソッドに何を入れるのかが書いてなかったので、理解しかねている状態です。
左が追加ボタンを押す前、右が追加ボタンを押した後になります。
その際、追加された行のボタンのテキストが「更新」と表示されます。
自分が使用するのなら問題ないのですが、このツールは他者が使用することを前提としているので、
更新のままですと誤解の原因になりかねないので、「登録」と変更したいです。
以下が実際のコードになります。
Javascriptの方はバッググランドで動いているgsファイルになります。
js
1function doGet(e){ 2 const html = HtmlService.createTemplateFromFile("index"); 3 return html.evaluate(); 4} 5 6// スプレットシートに登録しているデータをWEB上に表示 7const importRecords = () => { 8 const sh = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet(); 9 const values = sh.getRange(1, 1, sh.getLastRow(), sh.getLastColumn()).getValues(); 10 values.shift(); 11 12 return values; 13} 14 15// WEB上から入力された情報をスプレットシートに反映 16const updateRecords = (id, text) => { 17 const sh = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet(); 18 const values = sh.getRange(1, 1, sh.getLastRow(), sh.getLastColumn()).getValues(); 19 20 const idxes = values.map(e => e[0]); 21 const idx = idxes.indexOf(Number(id)); 22 sh.getRange(idx + 1, 2).setValue(text); 23 24 // 他ユーザーが変更した内容を反映するのに、再描画を実施 25 return importRecords(); 26}
html
1<!DOCTYPE html> 2<html> 3 <head> 4 <base target="_top"> 5 <style> 6 li{ 7 margin-top: 5px; 8 } 9 </style> 10 </head> 11 <body> 12 <div id="app"> 13 <table> 14 <tr> 15 <th>テキスト</th> 16 <th></th> 17 </tr> 18 <tr v-for="(row, index) in rows" :key="index"> 19 <td> 20 <!-- スプレッドシートの第一列をプライマリーキーと設定し、それを非表示にしている --> 21 <input v-model='rows[index][0]' type="hidden" /> 22 <input v-model='rows[index][1]' /> 23 </td> 24 <td> 25 <button v-on:click="updateData" name="action">更新</button> 26 </td> 27 </tr> 28 </table> 29 {{sheetData}} 30 <button v-on:click="append">追加</button> 31 <p>{{message}}</p> 32 </div> 33 34 <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script> 35 <script> 36 const vm = new Vue({ 37 el: '#app', 38 data:{ 39 "message": null, 40 "rows": [] 41 },computed:{ 42 "sheetData":function(){ 43 google.script.run.withSuccessHandler(function(data){ 44 vm.rows = data; 45 }).importRecords(); 46 } 47 },methods:{ 48 "updateData": function(event){ 49 const parent = event.path[2].children; 50 const inputData = parent[0].children; 51 52 google.script.run.withSuccessHandler(function(data){ 53 vm.rows = data; 54 }).withFailureHandler(function(data){ 55 vm.message = "Error"; 56 }).updateRecords(inputData[0].value, inputData[1].value); 57 },"append": async function(){ 58 vm.rows.push("0"); // ここの処理がよくわからない 59 } 60 } 61 }); 62 </script> 63 </body> 64</html>
スプレットシートにあるデータは以下の通りです。
| No | Text |
|---|---|
| 1 | Osaka |
| 2 | Sapporo |
| 3 | Tokyo |
| 4 | Nagoya |
改めて、「更新」ボタンのテキストを「登録」に変更するにはどうしたらいいでしょうか？
ご質問にありました、ログの結果は以下の通りです。
(5) [Array(2), Array(2), Array(2), Array(2), "0", ob: Observer]
0: Array(2)
0: 1
1: "Sapporo"
length: 2
ob: Observer {value: Array(2), dep: Dep, vmCount: 0}
proto: Array
1: (2) [2, "Nagoya", ob: Observer]
2: (2) [3, "Mito", ob: Observer]
3: (2) [4, "Tokyo", ob: Observer]
4: "0"
length: 5
ob: Observer {value: Array(5), dep: Dep, vmCount: 0}
proto: Array
新規追加されたのは、「4:"0"」になります。
ブラウザのコンソールから出力しているので、余計な要素が付いておりますが、ご容赦ください。
回答1件
0
ベストアンサー
意図した回答でなければ申し訳ございませんが、
スプレッドシートと紐づいている形であれば下記でいかがでしょうか？
html
1<!DOCTYPE html> 2<html> 3 <head> 4 <base target="_top"> 5 <style> 6 li{ 7 margin-top: 5px; 8 } 9 </style> 10 </head> 11 <body> 12 <div id="app"> 13 <table> 14 <tr> 15 <th>テキスト</th> 16 <th></th> 17 </tr> 18 <tr v-for="(row, index) in rows" :key="index"> 19 <td> 20 <!-- スプレッドシートの第一列をプライマリーキーと設定し、それを非表示にしている --> 21 <input v-model='rows[index][0]' type="hidden" /> 22 <input v-model='rows[index][1]' /> 23 </td> 24 <td> 25 <button v-on:click="updateData" name="action"> 26 {{rows[index][0] === '0' ? '追加' : '更新'}} 27 </button> 28 </td> 29 </tr> 30 </table> 31 {{sheetData}} 32 <button v-on:click="append">追加</button> 33 <p>{{message}}</p> 34 </div> 35 36 <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script> 37 <script> 38 const vm = new Vue({ 39 el: '#app', 40 data:{ 41 "message": null, 42 "rows": [] 43 },computed:{ 44 "sheetData":function(){ 45 google.script.run.withSuccessHandler(function(data){ 46 vm.rows = data; 47 }).importRecords(); 48 } 49 },methods:{ 50 "updateData": function(event){ 51 const parent = event.path[2].children; 52 const inputData = parent[0].children; 53 54 google.script.run.withSuccessHandler(function(data){ 55 vm.rows = data; 56 }).withFailureHandler(function(data){ 57 vm.message = "Error"; 58 }).updateRecords(inputData[0].value, inputData[1].value); 59 },"append": async function(){ 60 vm.rows.push("0"); // ここの処理がよくわからない 61 // ここの処理は"0"が追加するキーという意味合いで定義しているのであれば、arrayが異なるので下記のような形で動くのであれば下記にした方が良いかと思いました。 62 // vm.rows.push(["0", ""]); 63 } 64 } 65 }); 66 </script> 67 </body> 68</html>
投稿2021/06/01 11:02
総合スコア318
あなたの回答
tips
プレビュー
Q&A
