Can you help me figure out how to properly send a get method from Vue in an HTML file? Here's the code I have:
<html>
<head>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="myDiv">
<p>{{something}}</p>
</div>
</body>
<script>
new Vue({
el: '#myDiv',
data: function(){
return{
something: ''
}
},
ready: function(){
this.getValue();
},
methods: {
getValue: function(){
var value = value;
this.$http.get('https://jsonplaceholder.typicode.com/posts/1')
.success(function(value){
this.$set('value',value);
})
.error(function(err){
value.log(err);
});
}
}
});
</script>
</html>
I'm trying to display the response as a string in the div with id="myDiv". Imagine my response is a simple JSON object:
{
"name":"Jon",
"age":1
}
Even though there are no errors in the console, my screen remains blank. Any idea why?
@Update: Here's what I see on my screen:
https://i.sstatic.net/34S7c.jpg
@Update2 Refined version of my HTML file (based on your suggestions):
<html>
<head>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="myDiv">
<div v-if="response.userId">
{{ response.userId }}
{{ response.id }}
{{ response.title }}
{{ response.body }}
</div>
<div v-if="response.error">
<p>Request failed</p>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#myDiv',
data: {
response: {}
},
created() {
this
.$http
.get('https://jsonplaceholder.typicode.com/posts/1')
.then(function(response) {
console.log(response)
this.$set('response', response.data)
})
}
});
</script>
</html>