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

我正在使用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>

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

{{index}}{{todo.text}

新Vue({
el:“#应用程序”，
数据：{
待办事项：[
{text:'学习JavaScript'}，
{text:'Learn Vue'}，
{text:'构建一些很棒的东西'}
]
}
});

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

{{index}}{{todo.text}

新Vue({
el:“#应用程序”，
数据：{
待办事项：[]
},
挂载：函数（）{
此.$nextTick（函数（）{
axios.get（“/articles”）
.然后（功能（响应）{
控制台日志（响应）；
this.todos=response.data；
})
.catch（函数（错误）{
console.log（错误）；
});
});
}
});

下面的模拟正在运行

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

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

{{index}}{{todo.text}

新Vue({
el:“#应用程序”，
数据：{
待办事项：[]
},
挂载：函数（）{
此.$nextTick（函数（）{
var-arr=[
{text:'学习JavaScript'}，
{text:'Learn Vue'}，
{text:'构建一些很棒的东西'}
];
this.todos=arr；
});
}
});

我认为，您需要在axios.get（self=this）之前保留“this”，然后进行更改 this.todos=response.data； 到

---

self.todos=response.data

我认为，您需要在axios.get（self=this）之前保留“this”，然后进行更改 this.todos=response.data； 到 self.todos=response.data