在组件中使用API​​调用

Question

我正在玩VueJS，并尝试从组件内部进行api调用：

var postView = {
    props: ['post'],
    template: '<li>{{ post.title }}</li>',
    url: 'https://jsonplaceholder.typicode.com/posts',
    data: function () {
        return {
            results: []
        }
    },
    mounted() {
        axios.get(url).then(response => {
            this.results = response.data
        })
    },
    ready: function () { },
    methods: {}
}

Vue.component('postitem', postView);

var app = new Vue({
    el: '#app',
    data: {},
    ready: function () { },
    methods: {}

})

我收到以下错误：

  

[Vue警告]：属性或方法“结果”未在   实例，但在渲染过程中被引用。

我想知道最好的方法是从组件内部进行api调用并将其显示在HTML页面上。我了解到，组件的数据选项必须是一个函数，但是我不确定与“结果”相关的错误是什么意思。

Answer 1

首先，您应该考虑使用vue单个文件组件。它们非常适合拆分您的功能。 Vue requests guide

您可以观看整个播放列表以获取完整的vue指南。链接指向解释vue中api调用的视频。

Answer 2

我认为（this）的错误

您可以这样做：

var vm = this;
axios.get(url).then(response => {
        vm.results = response.data
 })