I have the following code in Vue JS V2:
data() {
return {
properties: [],
loading: true,
showProgressBars: true,
debugText: 'This is start'
}
},
methods: {
get() {
const success = (r) => {
this.properties = r.data.properties
this.loading = false
this.debugText = 'api has returned success'
}
const error = (r) => {
console.error(r)
}
var resourceUri = `/api/v1/properties`
this.$http
.get(resourceUri)
.then(success, error)
}
I don't know why the properties array is not being updated. I can see that the API is returning the properties correctly and if I debug the script in chrome, the correct data is indeed assigned to this.properties in the callback.
I added the debugText in there and it is also not updated.
<p>{{debugText}}</p>
This code has not had any changes for the pass two years and it failed today - I'm not sure whats going on here?
I don't know which version of vue-resource you are using. Maybe your version is old. According to this github page when you use this.$http.get() in version "vue-resource": "^1.5.3", you must use response.body to get data. I am not sure that this is the reason that your code is not working, But this code works fine for me:
<template>
<h1>API page</h1>
</template>
<script>
export default {
name: "Apicall",
data() {
return {
properties: [],
loading: true,
showProgressBars: true,
debugText: 'This is start'
}
},
methods: {
get() {
const success = (r) => {
console.log(r.body);
this.properties = r.body
this.loading = false
this.debugText = 'api has returned success'
}
const error = (r) => {
console.error(r)
}
var resourceUri = `https://jsonplaceholder.typicode.com/users`
this.$http
.get(resourceUri)
.then(success, error)
},
},
mounted: function() {
this.get();
}
}
</script>
<style scoped>
</style>Maybe for your data, you should call r.body.data.properties, But I am not sure.