Ajax request is not giving any data

Question

I am following a tutorial and making a single page app using laravel and vue.js. But at a certain point, an ajax request is not giving me the expected output. I have been trying many ways but nothing is working.

template I'm facing problem with

<template>
    <v-container>
        <v-form @submit.prevent="create">
            <v-autocomplete
                    :items="categories"
                    item-text="name"
                    item-value="id"
                    v-model="form.category_id"
                    label="Category"
            ></v-autocomplete>
</template>

<script>
    export default {
        data() {
            return {
                form: {
                    title: null,
                    category_id: null,
                    body: null
                },
                categories: {}, //Expecting to populate the object with axios request.
                errors: {}
            };
        },
        created() {
            axios.get("/api/category").then(res => (this.categories = res.data.data)); //This line is not populating the 'categories' object.
        },
    };
</script>

Category controller where I'm sending axios request

class CategoryController extends Controller
{
    public function index()
    {
        return Category::latest()->get();
    }

    public function store(Request $request)
    {
        $category = new Category();
        $category->name = $request->name;
        $category->slug = Str::slug($request->name);
        $category->save();
        return response('Created',Response::HTTP_CREATED);
    }

    public function show(Category $category)
    {
        return $category;
    }

    public function update(Request $request, Category $category)
    {
        $category->update(['name'=>$request->name,'slug'=>Str::slug($request->name)]);
    }

    public function destroy(Category $category)
    {
        $category->delete();
        return response(null,Response::HTTP_NO_CONTENT);
    }
}

I expect to get the categories object to be populated with the axios request, but the categories boject is undefined

Answer 1

Assuming that /api/category is for your index() method, the reason you're not getting any results is because you're not returning anything keyed by data (the 2nd in res.data.data ), the information you need will be in res.data .

created() {
    axios.get("/api/category")
        .then(res => this.categories = res.data)
        .catch(err => console.log(err)); 
},