在组件中使用 API 调用答案

【问题标题】：Use API call in component在组件中使用 API 调用
【发布时间】：2018-12-30 00:48:50
【问题描述】：

我正在使用 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 页面上的最佳方法是什么。我了解到组件的数据选项必须是函数，但我不确定与“结果”相关的错误是什么意思。

【问题讨论】：

标签： vue.js vue-component axios

【解决方案1】：

我认为（这个）的错误

你可以这样做：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：