When i set axios response in vue js i get an empty array in laravel blade

Question

I am trying to display results in my page, When i log response. I can see the response, I have tried passing the response to vue js data, but each time it displays an empty array

     var app = new Vue({
        el: '#app',
        data: {
            results: []
        },
        mounted(){
            var url = "{{ url('fetch/messages') }}";
            axios.get(url)
                .then(function (response) {
                    console.log(response.data);
                    this.results = response.data;
                })
                .catch(function (error) {
                    console.log(error);
                });
        }

I am trying to display the response in the page @{{ results }}

Are you trying to render the results in a vue template or in a blade template? You can't update a blade template after it has been rendered in this way. — Juan Rangel
– Juan Rangel, Commented Sep 8, 2018 at 6:10

Rwd · Accepted Answer · 2019-11-04 06:58:30Z

The reason your data is not getting added to the Vue instance is because this will not refer to the Vue instance inside a closure (traditional function () {}). Please have a look at this article for more information on scope and this keyword in javascript.

Below I refer to ES quite a bit which stands for ECMAScript. Here is an article to show the difference between it and vanilla javascript.

I can see from your post that you're using ES6/ES2015 syntax for your method definitions so I'm assuming you're happy with just using modern browsers for now.

If this is the case then you can use Arrow Functions to get past the scope issue:

.then(response => {
    console.log(response.data);
    this.results = response.data;
})

If not, then as mentioned in the scope article above, you would need to assign this to a variable:

var self = this;

axios.get(url)
    .then(function (response) {
        console.log(response.data);
        self.results = response.data;
    });

If this is the case, then I would also suggest not using the ES6 method definitions either so change mounted(){ to mounted: function () {.

Finally, if you want to be able to use modern/new javascript e.g. ES6/ES2015 and above, but have your code work consistently with older browsers then I would suggest using something like Laravel mix to compile your javascript for you.

Laravel Mix Documentation Laravel Mix tutorial series

Polaris · Accepted Answer · 2018-09-08 09:15:08Z

0

You cannot have the following line of code, it will break.

            var url = "{{ url('fetch/messages') }}";

answered Sep 8, 2018 at 9:15

Polaris

1,2499 silver badges14 bronze badges

Collectives™ on Stack Overflow

When i set axios response in vue js i get an empty array in laravel blade

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related