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>
Hello, Trying to figure out how the vue-resource $http access to an api works. So created this basic page and when I load it to the browser, all I get is an empty array. I followed the instruction posted on the official page (https://github.com/pagekit/vue-resource/blob/master/docs/http.md)
I'm able to display the response.status on the page so the script is communicating but the data is not displayed at all. If you visit the page (https://jsonplaceholder.typicode.com/users) data is there.
What am I doing wrong? Please advise...
this.$resource? There you should definethis.$http– Belmin Bedak Dec 5 '16 at 21:04