ollie_123
1 month ago

New to Vue - Stuck on axios.delete

Posted 1 month ago by ollie_123

Evening all

I decided to dip my toes into Vue and have been playing with a simple task list to get my head round components & CRUD in Vue etc.

So far i can add a task and append it to the list however i'm a bit stuck on the delete method as i keep getting an error of api/tasks/undefined 404 message: "No query results for model [App\Task] undefined".

Please could someone advise where im going wrong.

//my-tasks Component
<h4>All Tasks</h4>
                <ul class="list-group">
                    <li v-if='list.length === 0'>There are no tasks yet!</li>
                    <li class="list-group-item" v-for="(task, index) in list" :key="task.id"> {{ task.name }} - {{ task.description }} 
                        <button @click="deleteTask(task.id)" class="btn btn-danger btn-xs pull-right">Delete</button>
                    </li>
                </ul>

	    deleteTask(id) {
                axios.delete('api/tasks/' + id)
                    .then((response) => {
                        this.fetchTaskList()
                    })
                    .catch((err) => console.error(err));
            },

// Controller 
public function destroy($id)
    {
        $task = Task::findOrFail($id);
        $task->delete();
        return response()->json("deleted");
    }

Thanks in advance.

Please sign in or create an account to participate in this conversation.