前提・実現したいこと
いつもお世話になっております。
下記、実装したいことになります。
・実装したいこと
1:削除ボタン押下時にチェックボックスにチェックがついているデータを削除ボタン含め削除を行いたい。
2:初期表示時に、登録ボタンを押下していないがバインドしている為、チェックボックスと削除ボタンだけが作成されてしまうのでその作成を止めたい。
・現状
チェックボックスにチェックが入っていることを判断する為、配列に変数の追加を行ったのですが、
削除ボタン押下時に関数でないものを呼び出そうとして以下のエラーになります。
この記載方法だとfilterメソッドは使用できないのでしょうか?
どなたかご教授お願い致します。
発生している問題・エラーメッセージ
TypeError: todo.filter is not a function
該当のソースコード
vue
1<template> 2 <div id="app"> 3 <h1>ToDoManagement</h1> 4 <input type="text" v-model="textinput"> 5 <input type="button" v-on:click="insertbutton" value="登録"> 6 <p><span>{{textinput.length}}</span>文字</p> 7 <div v-for="(todo in todolist" v-bind:key="todolist"> 8 <input type="checkbox" id="check" v-model="todo.checked"> 9 <label for="check">{{todo.name}}</label> 10 <input type="button" v-on:click="deleatebutton(todo)" value="削除"> 11 </div> 12 </div> 13</template> 14 15<script> 16export default { 17 data() { 18 return { 19 textinput: '', 20 todolist: [{name:'',checked:false}], 21 }; 22 }, 23 methods: { 24 insertbutton() { 25 if (this.textinput === '') return; 26 this.todolist.push({name:this.textinput,checkd:false}); 27 }, 28 deleatebutton(todo) { 29 var newtodolist = todo.filter(function (todo){ 30 return todo.checked === false 31 }) 32 }, 33 }, 34}; 35 36</script> 37 38<style lang="scss"> 39#app { 40 font-family: 'Avenir', Helvetica, Arial, sans-serif; 41 -webkit-font-smoothing: antialiased; 42 -moz-osx-font-smoothing: grayscale; 43 text-align: center; 44 color: #2c3e50; 45} 46#nav { 47 padding: 30px; 48 a { 49 font-weight: bold; 50 color: #2c3e50; 51 &.router-link-exact-active { 52 color: #42b983; 53 } 54 } 55} 56</style> 57
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/09/09 05:53