Me gustaría representar los datos del hijo recibidos del servidor en un bucle:
Los datos que recibo en json son como (vistos en la consola del navegador):
fetched data is: {projs: Array(10), page_number: 1, total_pages: 1} page_number: 1 projs: Array(10) 0: {typ: 1, ttl: 'Ada gwgwe', slg: 'Ada-gwgwe', dsc: ' Qui qui voluptas bla', skls: Array(2), …} 1: {typ: 3, ttl: 'Aut magna consequatu', slg: 'Aut-magna-consequatu', dsc: 'Reiciendis nobis omn', skls: Array(1), …} 2: {typ: 2, ttl: 'Perferendis itaque p', slg: 'Perferendis-itaque-p', dsc: 'Perferendis velit a', skls: Array(1), …} 3: {typ: 1, ttl: 'Cumque sint maiores ', slg: 'Cumque-sint-maiores-', dsc: ' Rerum a nemo consequ', skls: Array(4), …} length: 4 [[Prototype]]: Array(0) total_pages: 1Mi vue.js en una sola página:
const vueApp = new Vue({ delimiters: ['${', '}'], el: '#projs-container', data: { base_url: 'http://127.0.0.1:8080', display: 'this is rendered fine', projects: [], projs: [], }, created() { // GET request using fetch with error handling fetch("http://127.0.0.1:8080/projects-json") .then(async response => { const projects = await response.json(); console.log('fetched data is:', projects); let projs = projects.projs; // check for error response if (!response.ok) { // get error message from body or default to response statusText const error = (data && data.message) || response.statusText; return Promise.reject(error); } }) .catch(error => { this.errorMessage = error; console.error("There was an error!", error); }); }, methods: { });HTML:
<div id="projs-container"> <p>Hello World. ${ display }</p> <ul id="projs-loop"> <li v-for="p in projs" :key='projs.slg'> ${ p.ttl } </li> </ul>Pero, curiosamente, no se muestra nada en el bucle. ¿Que esta mal aquí? ¿Cómo puedo arreglarlo?
No está asignando el resultado de la búsqueda en el estado. Lo está definiendo localmente con let projs .
Para poder usarlo en la plantilla, debe agregar el resultado al estado de su aplicación.
const vueApp = new Vue({ delimiters: ['${', '}'], el: '#projs-container', data: { base_url: 'http://127.0.0.1:8080', display: 'this is rendered fine', projects: [], projs: [], }, created() { // GET request using fetch with error handling fetch("http://127.0.0.1:8080/projects-json") .then(async response => { const projects = await response.json(); // check for error response if (!response.ok) { // get error message from body or default to response statusText const error = (data && data.message) || response.statusText; return Promise.reject(error); } console.log('fetched data is:', projects); this.projs = projects.projs; // check this line here }) .catch(error => { this.errorMessage = error; console.error("There was an error!", error); }); }, methods: { });No revisé el resto del código, pero debería ponerte en marcha.