javascript - vue.js 2.0 : Data gotten from backend via ajax can not be shown in view

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请求并从后端获取数据，我可以在控制台中看到数据，但数据无法在 View 中显示。

<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 = 响应.data;到 self.todos = 响应.data;