@SPLENDIDKEEN - Can't test this at the moment but I'd do something like this
task-component
<template>
<div>
<form @submit.prevent="save">
<div class="row">
<div class="col-md-9">
<input name="task" placeholder="..." v-model="task">
</div>
<div class="col-md-3">
<button type="submit" class="button-none">
<div >
<h4><span>+</span></h4>
</div>
</button>
</div>
</div>
</form>
<div v-for="task in orderedTasks">
<p>
<span>{{ task.task }}</span>
<button @click="deleteTask(task.id)">Delete</button>
</p>
</div>
</div>
</template>
<script>
export default {
props:['partner'],
data() {
return {
task: null,
tasks: this.partner.tasks ? this.partner.tasks : []
}
},
computed: {
orderedTasks: function () {
return _.orderBy(this.tasks ? this.tasks : [], 'task')
}
},
methods: {
save(){
const self = this;
if (this.task) {
axios.post('/tasks', {
task: this.task,
}).then((response) => {
self.pushToTasks(response.data.task);
self.task = null;
}).catch((response) => {
console.log(response);
});
}
},
deleteTask(taskId) {
const self = this;
axios.delete('/tasks/' + taskId)
.then((response) => {
self.removeTask(taskId);
}).catch((response) => {
console.log(response);
});
},
pushToTasks(task) {
this.tasks.push({
task: task,
});
},
removeTask(taskId) {
this.tasks = _.remove(this.tasks, (task) => { return task.id != taskId });
}
},
}
</script>
routes/web.php
Route::delete('/tasks/{$task}', 'TaskController@destroy');
TaskController
public function destroy(Task $task) {
$task->delete();
return response($task, 200);
}
Note this line self.pushToTasks(response.data.task);
You can no longer just push this.task because we now need the ID of the new task from the DB so we can delete it if need be.
