【Vue.js】 ToDoアプリでチェックボックスがisDone: true時のみタスク削除できるようにしたい

Question

VueでToDoアプリを作成しているのですがチェックボックスがオン時のみ削除できるようにしたいのですが、jsをどのように記述すべきかわかりません。

<div id="app">
	<!-- タイトル -->
	<h2>Vue.js Hands On</h2>
	<form v-on:submit.prevent>
		<input type="text" v-model="newItem">
		<button v-on:click="addItem"> Add </button>
	</form>
	<ul>
		<!--  v-forによりtodo.item()を繰り返し表示 -->
		<li v-for="(todo, index) in todos">
			<input type="checkbox" v-model="todo.isDone">
			<!-- methods内のtodo.item-->
			<span v-bind:class="{done: todo.isDone}"> {{ todo.item }} </span>
			<button class="deletebox" v-on:click="deleteItem(index)"> DELETE </button>
		</li>
	</ul>
		<!-- JSON形式で表示確認 <-->
	<pre>{{ $data }}</pre>
</div>
	
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

const app = new Vue({
  el: '#app',
  data: {
    newItem: '',
    todos: []
  },
  methods: {
    addItem: function(event) {
      // inputが空なら、追加できない
      if (this.newItem == '') return;
      let todo = {
       item: this.newItem,
	　　isDone: false
      }
      this.todos.push(todo)
      this.newItem = ''
    },
		deleteItem: function(index) {
			//if (todo.isDone == false) return;
			if (todo.isDone == 'true') data.todos.splice(index, 1);
		}
  }
})

        deleteItem: function(index) {
            //if (todo.isDone == false) return;
            if (todo.isDone == true) data.todos.splice(index, 1);
        }

todoのisDoneがtrue時のみ、spliceメソッドによりタスクを削除したいです(false時はreturnする)。
よろしくお願いいたします。

Answer 1

チェック済みのところだけ削除したいのなら、data.todos.splice ではなく、this.todosの配列から該当するインデックスとなります。

    deleteItem: function (index) {
      if (this.todos[index].isDone) {
        this.todos.splice(index, 1);
      }
    }

Answer 2

検証はできていませんが、下記のようなコードでどうでしょうか。

        deleteItem: function(index) {
            if (this.todos[index].isDone) {
                this.data.todos = this.data.todos.filter(n => n !== (index + 1));
            }
        }