Vue.JS $HTTP 显示来自 api 的数据答案

【问题标题】：Vue.JS $HTTP displaying data from an apiVue.JS $HTTP 显示来自 api 的数据
【发布时间】：2017-04-20 07:27:15
【问题描述】：

 html>
    <head>
    <title>Vue App</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.7/vue.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue-resource/0.1.13/vue-resource.min.js"></script>
 </head>

<body>
<!--
<h1>
    <a href="http://localhost:1337/"> Home Page</a>
</h1>
<h1>
    <a href="http://localhost:1337/form"> Form Page</a>
</h1>
 -->

<div id="my_view">
    <p>{{ responseOptions| json }}</p>
    <br />
    <p>{{ origin | json }}</p>
</div>

<script>
    new Vue({
        el: '#my_view',
        data: {
            origin: ''

        },
        //it is showing an empty array. It's not returning any data.
        //leave name:"name" out  and it returns the whole object?
        // example from https://github.com/pagekit/vue-   resource/blob/master/docs/http.md


 ready: function () {
            var resource =   this.$resource('https://jsonplaceholder.typicode.com/users');
            resource.get({name: "name"}).then((response) => {

                this.$set('responseOptions', response.status)
                this.$set('origin', response)
            });
        }
    })

        </script>
   </body>
   </html>

你好，试图弄清楚 vue-resource $http 对 api 的访问是如何工作的。所以创建了这个基本页面，当我将它加载到浏览器时，我得到的只是一个空数组。我按照官方页面（https://github.com/pagekit/vue-resource/blob/master/docs/http.md）上发布的说明进行操作

我能够在页面上显示 response.status，因此脚本正在通信，但根本不显示数据。如果您访问页面 (https://jsonplaceholder.typicode.com/users) 数据就在那里。

我做错了什么？请指教...

【问题讨论】：

如果你使用的是 Vue 2，ready hook 已被弃用 - 改用mounted，或者更好的选择是created。还有什么是 this.$resource ？在那里你应该定义this.$http

标签： javascript vue.js vue-resource

【解决方案1】：

检查这个例子

https://jsbin.com/jeqekexiqa/edit?html,js,console,output

首先我注意到您同时使用了两个版本的 vue，这并不好。我坚持使用 Vue 2 的示例。

接下来，this.$resource对我来说有点奇怪，所以我不确定应该做什么。你可以全局使用Vue.http，或者如果你想直接在Vue实例中使用this.$http .

在我的示例中，我定义了数组，我们将在其中存储数据。然后我编写将触发 http 请求并从服务器获取 JSON 数据的方法，并将该数据存储在数据模型中的 items 数组中。

但是......这还不够，因为我们的方法没有被触发，所以我们在创建 Vue 实例后立即调用它，使用 created() 生命周期钩子。

稍后在模板中，我们只需使用v-for 进行简单的迭代以显示一切正常。

【讨论】：

谢谢贝尔敏。你的回答非常慷慨。对我帮助很大。