我的数据如下：
{
"2015-10-29": [
{
"updated_at": "2015-10-29 07:36:54",
"created_at": "2015-10-29 07:15:45",
"due_at": "2015-10-29 00:00:00",
"complete": false,
"description": "Task 1",
"user_id": "3",
"tenant_id": "1",
"id": "28"
},
{
"updated_at": "2015-10-29 07:36:58",
"created_at": "2015-10-29 07:15:45",
"due_at": "2015-10-29 00:00:00",
"complete": false,
"description": "Task 2",
"user_id": "3",
"tenant_id": "1",
"id": "29"
}
],
"2015-10-16": [
{
"updated_at": "2015-10-16 00:08:39",
"created_at": "2015-10-15 23:55:59",
"due_at": "2015-10-16 00:00:00",
"complete": false,
"description": "Mow and spray at Home Block",
"user_id": "2",
"tenant_id": "1",
"id": "2"
},
{
"updated_at": "2015-10-16 00:34:03",
"created_at": "2015-10-16 00:34:03",
"due_at": "2015-10-16 00:00:00",
"complete": false,
"description": "Another new task",
"user_id": "2",
"tenant_id": "1",
"id": "5"
},
{
"updated_at": "2015-10-29 07:37:10",
"created_at": "2015-10-16 06:18:54",
"due_at": "2015-10-16 00:00:00",
"complete": false,
"description": "Task 3",
"user_id": "3",
"tenant_id": "1",
"id": "10"
}
]
}
它基本上是按截止日期分组的任务列表。
我正在前端展示它们：
<div class="tasks-wrapper">
<button class="btn btn-sm btn-success"
v-on:click="addTask()">
Add Task
</button>
<template v-for="(due_at, tasks) in tasks">
<h3 class="task-date">@{{ due_at }}</h3>
<div class="task-item clearfix" v-for="task in tasks">
<button class="btn btn-sm btn-success"
v-on:click="toggleTaskCompletion(task)">
Complete @{{ task.complete }}
</button>
@{{ task.description }}
<div class="btn-group pull-right">
<button class="btn btn-sm btn-danger"
v-on:click="deleteTask(task)">
Remove
</button>
</div>
</div>
</template>
</div>
这是Vuejs文件：
var tasks = new Vue({
el: '#app',
data: {
tasks: [],
},
ready: function() {
this.fetchData();
},
methods: {
fetchData: function () {
this.$http.get('api/tasks').success(function(tasks) {
this.$set('tasks', tasks);
}).error(function(error) {
console.log(error);
});
},
toggleTaskCompletion: function(task) {
task.complete = ! task.complete;
this.$http.patch('api/tasks/'+ task.id, task);
},
deleteTask: function(task) {
alert(this.tasks);
this.tasks.$remove(due_at.task);
this.$http.delete('api/tasks/'+ task.id, task);
},
addTask: function() {
this.tasks.push({description: 'New'})
}
}
})
当按日期对任务进行分组时，我的deleteTask功能无法正常工作，如果我返回未分组的数据，它的工作正常。
我理解为什么它不起作用，我只是不确定如何解决它。任何帮助将不胜感激。
答案 0 :(得分：1)
我很确定你会这样做：
this.tasks[due_at].$remove(task);
此外，应该注意的是，您实际上并没有将due_at传递给删除功能。按钮应如下所示：
<button class="btn btn-sm btn-danger"
v-on:click="deleteTask(due_at, task)">
Remove
</button>
该功能看起来像这样：
deleteTask: function(due_at, task) {
alert(this.tasks);
this.tasks[due_at].$remove(task);
this.$http.delete('api/tasks/'+ task.id, task);
},
答案 1 :(得分：0)
以下是我解决这个问题的方法：
自定义过滤器
groupByDate: function(tasks) {
var result = {};
for (var i = 0; i < tasks.length; i++) {
var task = tasks[i];
//Skip if task is complete
if (task.complete) { continue; }
// Convert due_at date to be used as array key
var due_at = moment(task.due_at, 'YYYY-MM-DD').format('DD-MM-YYYY');
// Push task into results array
if (result[due_at]) {
result[due_at].push(task);
} else {
result[due_at] = [task];
}
}
return result;
}
HTML：
<template v-for="(due_at, groupedTasks) in tasks | groupByDate">
<h3 class="task-date">@{{due_at}}</h3>
<div class="task-item clearfix"
v-for="task in groupedTasks | inProcess"
track-by="id"
:class="{editing: task == editingTask}">
<div class="form-inline" v-show="editingTask == task">
<input type="text" class="form-control"
v-model="task.description"
v-task-focus="task == editingTask" />
<button class="btn btn-sm btn-success"
v-on:click="updateTask(task)">
Update
</button>
<button class="btn btn-sm btn-default"
v-on:click="cancelEdit()">
Cancel
</button>
</div>
<button class="btn btn-sm btn-default"
v-if="!task.complete"
v-show="editingTask != task"
v-on:click="toggleTaskCompletion(task)">
<span class="fa fa-check"></span>
</button>
<button class="btn btn-sm btn-success"
v-show="task.complete"
v-if="editingTask != task"
v-on:click="toggleTaskCompletion(task)">
<span class="fa fa-check"></span>
</button>
<div class="task-description" v-show="editingTask != task" >
<span v-if="!task.complete" v-on:dblclick="editTask(task)">@{{ task.description }}</span>
</div>
<div class="btn-group pull-right">
<button class="btn btn-sm btn-primary"
v-on:click="editTask(task)">
<span class="fa fa-pencil"></span>
</button>
<button class="btn btn-sm btn-danger"
v-on:click="deleteTask(due_at, task)">
<span class="fa fa-trash"></span>
</button>
</div>
</div>
</template>