Q&A
試したことを書き忘れていますよ。
前提・実現したいこと
伝票入力画面を作成しようとしており、明細行の追加と削除を行いたいのですが、
削除ボタンを押下時エラーが発生して削除が行えません。
発生している問題・エラーメッセージ
行削除ボタン押下時、「Error in v-on handler: "TypeError: this.details.splise is not a function"」のエラーが解消できません。
該当のソースコード
※html※ -------------------------------- <!DOCTYPE html> <html> <head> <title>sample1</title> </head> <body> <div id="app"> <h1>sample</h1> <table class="table"> <thead> <tr> <th>Check</th> <th>商品名</th> <th>単価</th> <th>数量</th> <th>消費税</th> <th>税額</th> <th>合計金額</th> </tr> </thead> <tbody> <tr v-for="(detail,index) in details" v-bind:key="detail.id"> <th><input type="checkbox" ></input> </th> <th><input @detail.productName></th> <th><input @detail.unitPrice></th> <th><input @num></th> <th><input @rate></th> <th><input @taxAmount></th> <th><input @totalAmount></th> <th><button @click="del(index)">削除</button></th> </tr> </tbody> </table> <button v-on:click="add">行を追加</button> </div> </div> <link rel="stylesheet" href="/main.css"> <script src="https://unpkg.com/vue"></script> <script src="/app.js"></script> </body> </html> -------------------------------- ※JS※ -------------------------------- var app = new Vue({ el: '#app', data() { return{ details:[{ productName:'', unitPrice:'', num:'', rate:'', taxAmount:'', totalAmount:'' }] } }, methods:{ add:function(){ this.details.push({ productName:'', unitPrice:'', num:'', rate:'', taxAmount:'', totalAmount:'' }) }, del:function(index){ this.details.splise(index,1) } } }) -------------------------------- ※CSS※ -------------------------------- .table { border: 1px solid #eee; border-collapse: collapse; } .table th, .table td { border: 1px solid #dedede; padding: .5em; text-align: center; }
試したこと
ここに問題に対して試したことを記載してください。
補足情報（FW/ツールのバージョンなど）
ここにより詳細な情報を記載してください。
回答1件
0
ベストアンサー
typoとか?
diff
1 2 del:function(index){ 3- this.details.splise(index,1) 4+ this.details.splice(index,1) 5 }
投稿2021/10/12 03:52
総合スコア3990
あなたの回答
tips
プレビュー
