Vuejs$remove按日期分组的数据

Vuejs $remove on data grouped by date

本文关键字：数据 日期 remove Vuejs      更新时间：2023-09-26

我有这样的数据：

{
  "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函数不起作用，但如果我返回未分组的数据，它也可以正常工作。

我理解为什么它不起作用，只是不知道如何修复它。任何帮助都将不胜感激。

我很确定你会想这样做：

this.tasks[due_at].$remove(task);

此外，需要注意的是，您实际上并没有将due_at传递给您的delete函数。按钮应该看起来像这样：

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

以下是我解决这个问题的方法：

自定义过滤器

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>
相关文章：