vue.js 2.0：通过ajax从后端获取的数据无法在视图中显示

Question

我正在使用vue.js 2.0，以下演示正在运行。

<div class="container" id="app">
    <ol>
        <li v-for="(todo,index) in todos">
            {{ index }} {{ todo.text }}
        </li>
    </ol>

</div>

<script>
    new Vue({
        el: '#app',
        data: {
            todos: [
                { text: 'Learn JavaScript' },
                { text: 'Learn Vue' },
                { text: 'Build something awesome' }
            ]
        }
    });
</script>

我使用axios（https://github.com/mzabriskie/axios）发送ajax请求并从后端获取数据，我可以在控制台中看到数据，但数据无法在视图中显示。

<div class="container" id="app">
    <ol>
        <li v-for="(todo,index) in todos">
            {{ index }} {{ todo.text }}
        </li>
    </ol>

</div>

<script>
    new Vue({
        el: '#app',
        data: {
            todos: []
        },
        mounted: function () {
            this.$nextTick(function () {
                axios.get('/articles')
                    .then(function (response) {
                        console.log(response);
                        this.todos = response.data;
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            });
        }
    });
</script>

而且，下面的模拟工作正在进行中。

<div class="container" id="app">
        <ol>
            <li v-for="(todo,index) in todos">
                {{ index }} {{ todo.text }}
            </li>
        </ol>

    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                todos: []
            },
            mounted: function () {
                this.$nextTick(function () {
                    var arr=[
                        { text: 'Learn JavaScript' },
                        { text: 'Learn Vue' },
                        { text: 'Build something awesome' }
                    ];
                    this.todos = arr;
                });
            }
        });
    </script>

Answer 1

我认为，你需要在axios.get（self = this）之前保留“this”，然后再改变   this.todos = response.data; 至   self.todos = response.data;