javascript - 使用 vuejs 时出现 for 循环问题

Question

今天下午我练习了一下 vuejs。只需使用 axios 即可获取一些数据。我成功检索到数据。但后来我遇到了 for 循环的问题。

如果我这样做

<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>

所以我做了一些改变，它起作用了

<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>

问题是
1. 在第一个代码中，为什么循环只运行一次？
2.我试图找出并发现一些关于“范围”的评论。那么有人可以向我解释得更清楚吗？谢谢。

Answer 1

第一段代码中then函数中的this未定义，可以使用箭头函数来绑定(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
                    }
                }
            })

像这样