Problem with for loop while working with vuejs

Question

This afternoon I was practicing a bit with vuejs. Simply use axios to get some data. I succeeded in retrieving data. But then I encountered a problem with the for loop.

If I do this

<template></template>

<script>
export default {
        data: function() {
            return {
                arr: []
            } 
        },
        created() {
            axios.get('url')
            .then(function(res) {
                for (var i = 0; i <= res.length; i++) {
                    if (true) {
                        // If i assign the value to the 'array' here, the for loop will stop
                        this.arr.push('something')
                        // I have also tried this.$data.arr
                    }
                }
            })
            .catch(err=>console.log(err));
        }
    }    
</script>

So I changed a bit and it worked

<script>

    export default {
        data: function() {
            return {
                arr: []
            } 
        },
        created() {
            var second_arr = []; // Defined a variable here
            axios.get('url')
            .then(function(res) {
                for (var i = 0; i <= res.length; i++) {
                    if (true) {
                        // Working with 'second_arr' variable instead of the 'arr' variable in the data 
                        second_arr.push = something; 
                    }
                }
            })
            .catch(err=>console.log(err));

            //then assign 'second_arr' to 'arr' in the data
            this.arr = second_arr;
        }
    }    
</script>

The question is
1. In the first code, why does the loop only run once?
2. I have tried to find out and found a few comments about 'scope'. So can someone explain more clearly to me? Thanks.

have you checked the length of res ? like console logged it? — GBWDev
– GBWDev, Commented Mar 16, 2020 at 12:10

2239559319 · Accepted Answer · 2020-03-16 12:13:04Z

1

In the first code this in then function is undefined, you can use arrow funtion to bind this

.then((res) => {
                for (var i = 0; i <= res.length; i++) {
                    if (true) {
                        // If i assign the value to the 'array' here, the for loop will stop
                        this.arr.push('something')
                        // I have also tried this.$data.arr
                    }
                }
            })

like this

answered Mar 16, 2020 at 12:13

2239559319

1241 bronze badge

Sign up to request clarification or add additional context in comments.

Comments

Darius · Accepted Answer · 2020-03-16 12:13:24Z

1

All action must take place in then as axios do asychronous call, and scope this in function has another value:

var that = this;
var second_arr = []; // Defined a variable here
axios.get('url')
  .then(function(res) {
     for (var i = 0; i <= res.length; i++) {
        if (true) {
            second_arr.push = something; 
        }
     }
     that.arr = second_arr;
})
.catch(err=>console.log(err));

answered Mar 16, 2020 at 12:13

Darius

1,1802 gold badges8 silver badges18 bronze badges

Comments

r0ulito · Accepted Answer · 2020-03-16 12:16:09Z

0

I'm pretty sure your data are not in response but in response.data

As you can see when you console.log(response.length) console's returns undefined but when you console.length(response.data.length) it returns 1

EDIT : In my exemple case, there's only one object in data, maybe in your case it will be more than 1

answered Mar 16, 2020 at 12:16

r0ulito

4973 silver badges13 bronze badges

Collectives™ on Stack Overflow

Problem with for loop while working with vuejs

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related