Vue.JS $HTTP显示来自api的数据
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资源api的$http访问是如何工作的。因此创建了这个基本页面，当我将它加载到浏览器时，我得到的只是一个空数组。我遵循官方页面(https://github.com/pagekit/vue-resource/blob/master/docs/http.md)上的指示
我能够在页面上显示response.status，这样脚本就可以通信了，但是数据根本不显示。如果您访问页面(https://jsonplaceholder.typicode.com/users)，数据就在那里。
我做错了什么？请告诉我..。
回答 1
Stack Overflow用户
发布于 2016-12-05 21:16:33
检查此示例
https://jsbin.com/jeqekexiqa/edit?html,js,console,output
首先，我注意到您在一起使用两个版本的vue，这不是很好，我在示例中使用了Vue 2。
接下来，this.$resource对我来说有点奇怪，所以我不确定do.You可以在全局上使用Vue.http，如果您想直接在Vue实例中使用它，则使用this.$http。
在我的示例中，我定义了数组，在其中存储data.Then --编写触发http请求并从服务器获取JSON数据的方法，并将数据存储在数据模型中的items数组中。
但是.这还不够，因为我们的方法没有被触发，所以我们在Vue实例创建后立即调用它，方法是使用created()生命周期挂钩。
在后面的模板中，我们只需使用v-for进行简单的迭代，以表明一切都正常。
https://stackoverflow.com/questions/40982123
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号