0
273
Vistas¿Por qué no puedo acceder a los datos de axios.get() una vez que los paso a un objeto reactivo vuejs?
Soy bastante nuevo con Vue y lo que estoy haciendo es muy simple, creo que debe ser un problema de reactividad, el caso es que estoy haciendo un axios.get(), y cuando consola.log(res.data ) se muestra todo bien. Pero cuando trato de hacer el objeto res.data = reactivo, solo registra este ⇾ Proxy {} (como si no hubiera nada en él) Dejo el código y 2 imágenes, una para cada escenario. Codifique cuando console.log res.data y esté bien:
<script> import { onMounted, reactive, ref } from 'vue'; import axios from 'axios'; export default { name: 'HomeView', setup() { const state = reactive({ destinations: [] }) const destinations = ref([]); onMounted( () => { axios.get('https://my-json-server.typicode.com/Tommydemian/vue-school-router/db') .then(response => response.data.destinations) .then( data => console.log(data) ) }) return { state } } } </script> Aquí está la respuesta: 
y aquí está el cambio en el código y la imagen de console.log:
const state = reactive({ destinations: [] }) onMounted( () => { axios.get('https://my-json-server.typicode.com/Tommydemian/vue-school-router/db') .then(response => response.data.destinations) .then( data => (state.destinations = data) ) }) console.log(state.destinations) imagen: 
1 Respuestas
Responde la pregunta0
no está asignando el valor de la respuesta de axios al estado, pruébelo:
onMounted(async () => { const response = await axios.get( "https://my-json-server.typicode.com/Tommydemian/vue-school-router/db" ); state.destinations = response.data.destinations; });Nota: El archivo console.log debajo de onMounted muestra el estado vacío porque es asíncrono y el archivo console.log se ejecuta antes de esa función.
Verifique la caja de arena aquí