Как удалить элемент массива при клике на кнопку?

Question

[dudaevfrontend]

Написал todo list. Как бы прописать функцию deleteTodo, чтобы все работало?

<template>
  <div class="todo-list">
    <input type="text" placeholder="Впишите название дела" class="input" v-model="inputValue">
    <button class="addTodo" @click="addTodo">Добавить дело</button>
    <div>
      <ul>
        <li class="item" v-for="todo in todos" :key="todo.id"><h4>{{ todo.todo }}</h4> 
          <button class="deleteTodo" @click="deleteTodo">Удалить</button>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        todos: [],
      inputValue: ""
      }
    },
    methods: {
      addTodo() {
        this.todos.push({id: Date.now(),todo: this.inputValue})
        this.inputValue = ""
      },
      deleteTodo() {
        //Код для удаления элемента из Массива todos
      }
    },
  }
</script>

Answer 1

[Aetae]

@click="deleteTodo(todo)"

deleteTodo(todo) {
  this.todos.splice(this.todos.indexOf(todo), 1);
}

Или

v-for="(todo, index) in todos"
@click="deleteTodo(index)"

deleteTodo(index) {
  this.todos.splice(index, 1);
}