主页 / 问题 / 1129597
Accepted
IlyaDrummer
Asked:2020-05-22 12:16:21 +0000 UTC2020-05-22 12:16:21 +0000 UTC

如何为已完成的任务添加删除按钮？

  • 772

如何仅为已完成的任务添加删除按钮？

        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
        },
      }
    })

编码

vue.js

2 个回答

  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>

    • 1
  2. Best Answer

    我这样做了）这是一个方法

     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>
    • 1

相关问题