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

Question

 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)，数据就在那里。

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

Answer 1

检查这个例子

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

首先我注意到您同时使用了两个版本的 vue，这不是 good.I 在 Vue 2 的示例中。

接下来，this.$resource对我来说有点奇怪，所以我不确定do.You可以全局使用Vue.http，还是this.$http如果你想直接在 Vue 实例中使用它。

在我的示例中，我定义了数组，我们将在其中存储 data.Then 我编写了触发 http 请求并从服务器获取 JSON 数据的方法，并将该数据存储在我们数据中的项目数组中型号。

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

稍后在模板中，我们只是用 v-for 进行简单的迭代以表明一切正常。

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

Vue.JS $HTTP displaying data from an api

javascript

vue.js

vue-resource