
前提
プログラミング初心者です。
現在GASを使ってスプレッドシートの値を取得した後、レコードごとに表示ボタンを設置して、そのボタンが押されたらモーダル画面を出してからデータを修正させるというアプリを作成しています。
動的に取得したデータのボタンにvueを設定してみたのですが、反応しません。
html += "<td class='col-xs-1 col-ms-1 col-md-1 col-lg-1'><button v-on:click='openModal'>test</button></td>"
document.getElementById("add").innerHTML = html;
自分なりに調べてみるとinnerHTMLで差し込んだものは純粋なHTMLテキストとして追加されるため、vueのインスタンスとして読み込まれないというのがなんとなく理解でき、手動でマウントすれば良いのかぁというところまではなんとなく理解できたんですが、実際にどのように記載していいのかわからず質問させて頂きました。
実現したいこと
・動的に埋め込んだボタンを押したらvueで指定した動作をするようにしたい
該当のソースコード
HTML
1<body> 2<label>【氏名】</label> 3 <select class="form-control" id="id3"></select> 4<div id="add"></div> 5<div id="overlay" v-show="showContent"> 6 <div id="content"> 7 <p>これがモーダルウィンドウです。</p> 8 <button v-on:click="closeModal">Close</button> 9 </div> 10 </div> 11</body>
javascript
1 2new Vue({ 3 el: '#app', 4 data: { 5 showContent: false 6 }, 7 methods:{ 8 openModal: function(){ 9 this.showContent = true 10 }, 11 closeModal: function(){ 12 this.showContent = false 13 } 14 } 15}) 16 17/*----------------------------------------------------------------------------------------------------------------------- 18 sendData : データテーブルの作成 19 -------------------------------------------------------------------------------------------------------------------------*/ 20 //セレクトボックスのリストを取得 21 function sendData(){ 22 23 var data1 = document.getElementById("id3").value; 24 25 google.script.run.withFailureHandler(fail).withSuccessHandler(data_table).search(data1); 26 27 } 28 29 //表示データ取得成功時の処理 30 function data_table(result) { 31 32 var json = JSON.parse(result); 33 var datalength = json.length; 34 35 36 //ラベルを入れる 37 var html2 = "<h4>test情報</h4>" 38 39 //tableをを設置する 40 var html2 = "<table class='table table-striped table-bordered table-condensed newline'>" 41 html2 += "<thead>" 42 html2 += "<tr style='font-size: 80%'>" 43 html2 += "<th class='col-xs-1 col-ms-1 col-md-1 col-lg-1'>名前</th>" 44 html2 += "<th class='col-xs-1 col-ms-1 col-md-1 col-lg-1'>ボタン</th>" 45 html2 += "</tr>" 46 html2 += "</thead>" 47 if(datalength > 1){ 48 html2 += "<tbody>" 49 for(var i=1; i<datalength; i++){ 50 html2 += "<tr>" 51 html2 += "<td class='col-xs-1 col-ms-1 col-md-1 col-lg-1'>"+json[i][1]+"</td>" 52 html2 += "<td class='col-xs-1 col-ms-1 col-md-1 col-lg-1'><button v-on:click='openModal'>test</button></td>" 53 html2 += "</tr>" 54 } 55 html2 += "</tbody>" 56 } 57 html2 += "</table>" 58 html2 += "</div>" 59 60 document.getElementById("add").innerHTML = html2; 61 62 } 63 64
gas
1/*-----新規データ---------------------------------------------------------------*/ 2function search(data){ 3 4 //60_施設管理DBシステム_施設マスタ 5 var ss = SpreadsheetApp.openById('***'); 6 var sh = ss.getSheetByName("施設DB"); 7 8 //全データ取得 9 var mst = sh.getDataRange().getValues(); 10 11 //フロントから取得した施設名でフィルタリング 12 var inv = mst.filter(function(e){return e[2] === data}); 13 14 15 Logger.log(inv); 16 return JSON.stringify(inv); 17}
回答1件
あなたの回答
tips
プレビュー