CODEWITHSUNDEEP
laravellaravel-5vue.jsvuejs2axios
Maher Alhamod
Maher Alhamod

Reputation: 77

Laravel & vue axios get method returns Getters & Setters?

I am new in Vue.js and trying to use axios to fetch data from Laravel API. The function in backend returns an array of arrays as:

public function getPersonTypes()
{
    $data = [];
    $personTypes = config('codeechoo.documentation.config.personTypes');
    foreach ($personTypes as $id => $type) {
        $data[] = [
            'id' => $id,
            'name' => trans($type)
        ];
    }

    return response()->json($data);
}

And the Vue function in methods is:

fetchPersonTypes() {
           axios.get(route('api.documentation.person.types'))
                .then((response) => {
                    console.log(response.data);
                    this.personTypes = response.data;
                });
        }

But the console show the result as an array of objects like:

id: Getter & Setter
name: Getter & Setter

So how can I get the real values of id, name props ?

Upvotes: 3

Views: 1996

Answers (2)

Stefan Tanevski
Stefan Tanevski

Reputation: 320

I think you should call the route url directly. NOTE: because in axios the default baseURL is already set, you don't need to type base url, only the path. Example: instead of axios.get(http://yoursite.com/you/path), just type axios.get('your/path').

fetchPersonTypes() {
    axios.get('your/path').then(({data}) => {
        console.log(data);
        this.personTypes = data;
    });
}

Upvotes: -2

Julian Paolo Dayag
Julian Paolo Dayag

Reputation: 3729

You can extract the data by stringifying and then parsing it back:

let personTypes = JSON.parse(JSON.stringify(response.data));
console.log(personTypes);

What you will see in the console now is the whole data without the getters and setters.

Upvotes: 4

Related Questions