Question

 <template>
 <div>
  <p class="tasks">Completed Tasks: {{todos.filter(todo => {return todo.done === true}).length}}</p>
 <p class="tasks">Pending Tasks: {{todos.filter(todo => {return todo.done === false}).length}}</p>
 <todo v-on:delete-todo="deleteTodo" v-on:complete-todo="completeTodo" v-for="todo in todos" :key="todo.id"  v-bind:todo="todo"></todo>
 </div>
</template>


<script>

import Todo from './Todo';
export default {
name:'Myapp',
props: ['todos'],
components:{
Todo,
},
methods: {

deleteTodo(todo) {
   this.$swal({
    title: 'Are you sure?',
    text: 'You can\'t revert your action',
    type: 'warning',
    showCancelButton: true,
    confirmButtonColor: '#DD6B55',
    confirmButtonText: 'Yes, delete it!',
    cancelButtonText: 'No, Keep it!',
    showCloseButton: true,


   }).then((result) => {
     const todoIndex = this.todos.indexOf(todo);
     this.todos.splice(todoIndex, 1)
     if (result.value){
       this.$swal('Deleted!', 'Your Todo has been deleted', 'success')
     }
     else{
       this.$swal('Canceled', 'Your Todo is still in place', 'info')
     }

   });
},

completeTodo(todo) {
  const todoIndex = this.todos.indexOf(todo);
  this.todos[todoIndex].done = true;
  this.$swal('Success', 'Todo Completed!', 'success');
},
}

};

我是vue.js的新手，这是我在vue中的第一个项目。基本上，一切正常，但是我想实现一件事，即当用户单击“不保留”（取消按钮）或关闭按钮时，不应删除待办事项，但目前我很难做到这一点。

<template>
<div id="app">
<h1 class="ui dividing centered header">Vue.js Todo App</h1>
<div class='ui three column centered grid'>
  <div class='column'>
    <myapp v-bind:todos="todos"></myapp>
    <add-todo v-on:add-todo="addTodo"></add-todo>
  </div>
</div>
</div>

 </template>

<script>

 import Myapp from './components/Myapp';
 import Todo from './components/Todo';
 import AddTodo from './components/AddTodo';

 export default {
 name: 'App',

 components:{
Myapp,
Todo,
AddTodo,
},
methods: {
addTodo(newTodo){
this.todos.push(newTodo);

}
},

data:function () {
return {
  todos: [{
    title: 'Project 1',
    project: 'School',
    done: true,
  }, {
    title: 'Project 2',
    project: 'Mosque',
    done: true,
  }, {
    title: 'Project 3',
    project: 'Bank',
    done: false,
  },
    {
    title: 'Project 4',
    project: 'Hospital',
    done: false,
  },
  {
    title: 'Project 5',
    project: 'Church',
    done: false,
  }],
  }

}
};
</script>

将道具传递给子组件的根vue组件。

Answer 1

我相信问题在于您的Sweet Alert承诺。

无论是单击确认还是取消按钮，您都在拼接待办事项。

将您的拼接移动到if(result.value)状态，您就可以了。

deleteTodo(todo) {
    this.$swal({
        title: 'Are you sure?',
        text: 'You can\'t revert your action',
        type: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#DD6B55',
        confirmButtonText: 'Yes, delete it!',
        cancelButtonText: 'No, Keep it!',
        showCloseButton: true,
    }).then((result) => {
        if (result.value) {
            const todoIndex = this.todos.indexOf(todo);
            this.todos.splice(todoIndex, 1)
            this.$swal('Deleted!', 'Your Todo has been deleted', 'success')
        }
        else{
            this.$swal('Canceled', 'Your Todo is still in place', 'info')
        }

    });
},

Vue.js如何在单击不保留按钮（取消按钮）时保留待办事项？

1 个答案: