Проблема с для l oop при работе с vuejs

Question

Сегодня днем ​​я немного потренировался с vuejs. Просто используйте ax ios, чтобы получить некоторые данные. Мне удалось получить данные. Но потом я столкнулся с проблемой для for l oop.

Если я сделаю это

<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. В первом коде почему l oop запускается только один раз? 2. Я попытался выяснить и нашел несколько комментариев о «сфере». Так может кто-нибудь объяснить мне более четко? Спасибо.

Answer 1

Все действия должны выполняться в then, поскольку ax ios выполняет асинхронный вызов, а область действия this в функции имеет другое значение:

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

Answer 2

В первом коде эта функция затем не определена, вы можете использовать функцию стрелки, чтобы связать это

.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
                    }
                }
            })

как это

Answer 3

Я почти уверен, что ваши данные не в response, а в response.data

Как вы можете видеть, когда вы console.log(response.length) консоль возвращает undefined, но когда вы console.length(response.data.length) возвращает 1

РЕДАКТИРОВАТЬ: в моем примере, приведенном в качестве примера, есть только один объект в данных, может быть, в вашем случае это будет больше, чем 1