Tengo el siguiente código en 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) } No sé por qué la matriz de propiedades no se actualiza. Puedo ver que la API está devolviendo las propiedades correctamente y si depuro el script en Chrome, los datos correctos se asignan a this.properties en la devolución de llamada.
Agregué el debugText allí y tampoco está actualizado.
<p>{{debugText}}</p>Este código no ha tenido ningún cambio durante los últimos dos años y falló hoy. No estoy seguro de qué está pasando aquí.
No sé qué versión de vue-resource está utilizando. Tal vez tu versión sea antigua. De acuerdo con esta página de github, cuando usa this.$http.get() en la versión "vue-resource": "^1.5.3" , debe usar response.body para obtener datos. No estoy seguro de que esta sea la razón por la que su código no funciona, pero este código funciona bien para mí:
<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> Tal vez para sus datos, debería llamar a r.body.data.properties , pero no estoy seguro.