Vuejs $ удалить на данных, сгруппированных по дате

Question

У меня есть данные, что выглядит следующим образом:

{ 
    "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 не работает, когда задачи были сгруппированы по дате, он отлично работает, если я верну данные негруппированные, хотя.

Я понимаю, почему он не работает, я просто не знаю, как это исправить. Любая помощь будет оценена по достоинству.

Answer 1

Вот как я решил эту проблему:

Пользовательский фильтр

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> 

Answer 2

Я уверен, что вы хотели бы сделать это следующим образом:

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