Question

我使用了这个＆＃34;问题＆＃34;之前，但我真的不记得如何正确地得到结果。我正在使用Vue 2在可以在HTML端加载的变量中加载一些数据：

window.Vue = require('vue');
window.axios = require('axios');

const app = new Vue({
    el: '#app',
    data: {
        operaciones: [],
        sopts: []
    },
    created: function() {
        this.loadOperationTypes();
        console.log(this.operaciones); <-- SC
    },
    methods: {
        loadOperationTypes: function() {
            axios.post('/api/operaciones')
            .then(response => {
                console.log(response.data); <-- FC
                this.operaciones = response.data
            })
            .catch(error => {
                this.operaciones = error;
            });
        }
    }
});

如果我在Axios功能范围（FC）中编写console.log(response.data)，则会打印：

但如果我在console.log(response.data)范围内写created_ function() {}，则会打印：

我已经尝试过使用它了：

axios.post('/api/operaciones')
.then(response => {
    console.log(response.data);
    app.operaciones = response.data
})

和

var $this = this;
axios.post('/api/operaciones')
.then(response => {
    console.log(response.data);
    $this.operaciones = response.data
})

但是，同样的，任何线索？

提前致谢。

Answer 1

这实际上是与范围不同的问题。您在问题中尝试的任何解决方案都可以正确设置this.operaciones。问题是您正在处理异步操作。

该行

console.log(this.operaciones);

created中的

将始终记录一个空数组。那是因为loadOperationTypes执行异步操作;意味着需要时间。

您似乎期望loadOperationTypes中的所有内容都会在执行console.log之前完成，但事实并非如此。 loadOperationTypes将向服务器发起post，然后代码将继续并执行console.log。

稍后从服务器收到响应后，operaciones将填充响应。

console.clear()

const app = new Vue({
    el: '#app',
    data: {
        operaciones: [],
        sopts: []
    },
    created: function() {
        this.loadOperationTypes();
        console.log("THIS WILL ALWAYS BE AN EMPTY ARRAY", this.operaciones);
    },
    methods: {
        loadOperationTypes: function() {
            axios.post('https://httpbin.org/post', ["some", "data"])
            .then(response => {
                console.log("THIS SHOULD HAVE DATA", response.data.json);
                this.operaciones = response.data.json
            })
            .catch(error => {
                this.operaciones = error;
            });
        }
    },
    watch: {
      operaciones(newVal){
        console.log("THIS WILL HAVE DATA WHEN operaciones IS POPULATED", newVal)
      }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.17.1/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.9/vue.js"></script>

<div id="app"></div>

Vue.js 2＆amp; Axios范围问题

1 个答案: