前提・実現したいこと
いつもお世話になっております。
下記を実現したいです。
実現したいこと:削除ボタン押下時にfilter()を使用してフィルタリングした配列を再表示する。
困っている箇所:filter( item => item != todo ); ←を実装したのですが削除ボタンを押下しても動きません。
うまくフィルタリングされるにはどうしたらよろしいでしょうか?
どなたか分かる方ご教授お願い致します。
該当のソースコード
Vue
1<template> 2 <div id="app"> 3 <h1>ToDoリスト</h1> 4 <input type="text" v-model="textinput" placeholder="タスクを入力"> 5 <input type="button" v-on:click="insertbutton" value="登録"> 6 <p class="p-position"><span>{{textinput.length}}</span>文字</p> 7 <div class="div-position" v-for="(todo,idx) in todolist" v-bind:key="(todo)"> 8 <label> 9 <input type="checkbox" id="check" v-model="todo.checke"> 10 {{todo.name}} 11 <input type="button" v-on:click="deleatebutton(todo)" value="削除"> 12 </label> 13 </div> 14 </div> 15</template> 16 17<script> 18export default { 19 data() { 20 return { 21 textinput: '', 22 todolist: [], 23 }; 24 }, 25 methods: { 26 insertbutton() { 27 if (this.textinput === '') return; 28 this.todolist.push({ name: this.textinput, checke: false }); 29 this.textinput = ''; 30 }, 31 deleatebutton(todo) { 32 if (todo.checke === true) { 33 return this.todolist.filter( item => item != todo ); 34 } 35 }, 36 }, 37}; 38 39</script> 40 41<style lang="scss"> 42#app { 43 font-family: 'Avenir', Helvetica, Arial, sans-serif; 44 -webkit-font-smoothing: antialiased; 45 -moz-osx-font-smoothing: grayscale; 46 text-align: center; 47 color: #2c3e50; 48} 49#nav { 50 padding: 30px; 51 a { 52 font-weight: bold; 53 color: #2c3e50; 54 &.router-link-exact-active { 55 color: #42b983; 56 } 57 } 58} 59.p-position { 60 font-size: 80%; 61 margin-top: 0px; 62 position: absolute; 63 left: 380px; 64} 65.div-position { 66 padding-top: 25px 67} 68 69</style> 70
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/09/16 09:48