Hey all!
I'm building a Task app and earlier this week I posted here as well because of axios problems, but these have all been fixed and the app is working wonderfull!
At this moment I'm at my last hurdle, The Edit button with a axios call to edit the task that is stored in my list/Database.
Here is the button in my HTML
<tbody>
<tr v-for="task in tasks">
<td><input type="checkbox" v-model="task.done"></td>
<td><span :class="{ TaskDone: task.done }">@{{ task.name }}</span></td>
<td>
<button class="btn btn-info btn-block" v-on:click="editTask(task)">Bewerken</button>
<button class="btn btn-danger btn-block" v-on:click="deleteTask(task)">Verwijder</button>
</td>
</tr>
</tbody>
The method in my vue instance:
editTask: function () {
axios.put(`api/tasks/${task.id}`, {
name:this.tasks.name,
})
}
My api.php routes:
Route::get('tasks', 'TaskController@index');
Route::get('tasks/{id}', 'TaskController@show');
Route::post('tasks', 'TaskController@store');
Route::put('tasks/{id}', 'TaskController@update');
Route::delete('tasks/{id}', 'TaskController@destroy');
TaskController:
class TaskController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
return Task::all();
}
/**
* Show the form for creating a new resource.
*
* @return \Illuminate\Http\Response
*/
public function create()
{
//
}
/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
$task = Task::create($request->all());
return response()->json($task, 201);
}
/**
* Display the specified resource.
*
* @param \App\Task $task
* @return \Illuminate\Http\Response
*/
public function show(Task $task)
{
return $task;
}
/**
* Show the form for editing the specified resource.
*
* @param \App\Task $task
* @return \Illuminate\Http\Response
*/
public function edit(Task $task)
{
//
}
/**
* Update the specified resource in storage.
*
* @param \Illuminate\Http\Request $request
* @param \App\Task $task
* @return \Illuminate\Http\Response
*/
public function update(Request $request, Task $task)
{
$task->update($request->all());
return response()->json($task, 200);
}
/**
* Remove the specified resource from storage.
*
* @param \App\Task $task
* @return \Illuminate\Http\Response
*/
public function destroy($id)
{
$task = Task::find($id);
$task->delete();
return response()->json(null, 204);
}
}
So how do I exactly create the right method for my editTask ? I cant seem to figure it out.