index.showの画面でVue.jsを使ってカスタマイズしています。
一覧表示は上手くいったのですが、recNoをクリックしたときに、detailShow is not definedになってしまいます。
すみません、どうすればfunctionが起動するのか教えていただけないでしょうか。
ソースコードもコード挿入で貼りつけたのですが、上手く表示できていないようです。見にくいと思いますが、よろしくお願いします。
\<div id="app"\>\<br\>作業所検索\<input type="text"v-model="searchText"placeholder="検索文字を入力する"\>\<p\>\</p\>\<table id="view\_table"border="1px"\>\<thead\>\<tr\>\<th width="60"\>No\</th\>\<th width="180"\>契約CD\</th\>\<th width="400"\>作業所名\</th\>\<th width="500"\>契約名\</th\>\<th width="300"\>会社名\</th\>\<th width="200"\>部署名\</th\>\<th width="50"\>年\</th\>\<th width="30"\>月\</th\>\</tr\>\</thead\>\<tbody id="view\_tbody"\>\<tr v-for="record in filteredRecords"\>\<td id=recNo @click="detailShow($event)"\>{{record.レコード番号.value}}\</td\>\<td id=contractCD\>{{record.契約CD.value}}\</td\>\<td id=workplaceName\>{{record.作業所名.value}}\</td\>\<td id=contractName\>{{record.契約名.value}}\</td\>\<td id=companyName\>{{record.会社名.value}}\</td\>\<td id=departmentName\>{{record.部署名.value}}\</td\>\<td id=year\>{{record.年.value}}\</td\>\<td id=month\>{{record.月.value}}\</td\>\</tr\>\</tbody\>\</table\>\</div\>(function(){letvm1=newVue({data:{searchText:'',// 検索用のデータ追加records:[]},computed:{// フィルターするための関数作成filteredRecords:function(){letself=this;returnself.records.filter(function(record){returnrecord.作業所名.value.indexOf(self.searchText)!==-1;});}},});letvm2=newVue({el:'#recNo',methods:{detailShow:function(event){letdomtext=event.target.textContent;alert('domtext : '+domtext);}},});kintone.events.on('app.record.index.show',function(event){if(event.viewId===5736065){letrecords=event.records;if(records.length===0){document.getElementById('app').innerText='表示するレコードがありません';return;}// 作成されたVueインスタンスをカスタマイズビューで用意した #app にマウントvm1.$mount('#app');// データをセットconsole.log(records);Vue.set(vm1,'records',records);letrecUrl=location.protocol+'//'+location.hostname+'/k/'+kintone.app.getId()+'/show#record=';console.log(recUrl);letviewTable=document.getElementById('view\_table');console.log(viewTable);returnevent;}returnevent;});})();