Как добавить кнопку удаления у выполненной задачи?

Question

Как добавить кнопку удаления только у выполненной задачи?

        Vue.component('task-element',{
      props : ['task'],
      data : function () {
        var d = {seconds_elapsed: null}; 
        return d;
      },
      template : `<li>
          <label :class='{islong:task.islong}'>
            <input type="checkbox"
              v-on:change="toggle(task)"
              v-bind:checked="task.done">
            <span>
              {{ task.text }}
            </span>
            <small>
              {{ seconds_elapsed }}
            </small>
          </label>
        </li>`,
    });

    new Vue({
      el: "#app",
      data: {
        newTodos: '',
        todos: [{ text: "Задача", done: false, islong: false}],
        data_is_loaded: true,
      },
      methods: {
        addTodo (todo) {
            if(this.newTodo.length > 10) {
            this.todos.push({text: todo, done: false, islong: true})
            this.newTodo = ''
    }},
        toggle: function(todo){
          todo.done = !todo.done
        },
      }
    })

Код

Answer 1

const app = new Vue({
  el: '#app',
  data() {
    return {
      todos: [
        {text: "Задача1", done: false, islong: false},
        {text: "Задача2", done: true, islong: false},
        {text: "Задача3", done: false, islong: false},
      ],
      data_is_loaded: true,
    }
  },
  methods: {
    defaltTodo() {
      return {text: todo, done: false, islong: true};
    },
    addTodo (todo) {
      this.todos.push(this.defaltTodo);
    },
    toggle(todo) {
      todo.done = !todo.done;
    },
    removeTodo() {
      console.log('Need remove todo!');
    }
  },
});

.active {
  width: 100px;
  height: 100px;
  background: red;
}
.red {
  color:red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <template>
    <li v-for="todo in todos">
      <label
        :class="{islong:todo.islong}"
      >
        <input
          type="checkbox"
          v-on:change="toggle(todo)"
          v-bind:checked="todo.done"
        >
         <span>
           {{ todo.text }}
         </span>
         <span 
           v-show="!todo.done"
           class="red"
           @click="removeTodo()"
         >
           Удалить
         </span>
      </label>
    </li>
  </template>
</div>

Answer 2

Я делал так) Вот такой метод

 remove: function (index) {
        let del_catergory = this.tasks[index].catId
        this.tasks.splice(index, 1);            
        for(cat of this.categories){
            if(del_catergory == cat.id){
                cat.taskCount--;
            }
        }
    },

Для удаления по сути только 1 строчка тут:

this.tasks.splice(index, 1);

Вот так из компонента списка в главный прокидываю событие.

<a href="#" v-on:click="$emit('remove')">Delete</a>

А в корневом ловлю его:

<li
          is="todo-item"
          v-for="(task, index) in tasks"
          v-bind:key="task.id"
          v-bind:task="task"
          v-bind:category = "categories.find(cat => cat.id == task.catId)"
          v-on:set-done = "task.isDone = !task.isDone"
          v-on:remove="remove(index)"
        ></li>

БЛОГ НА HUSL

Как добавить кнопку удаления у выполненной задачи?

Ответы (2 шт):