La siguiente aplicación vue debería obtener algunos datos de una instancia de firebase utilizando el método de búsqueda y mostrar los datos en la página.

UserExperiences.vue

 <script> import SurveyResult from './SurveyResult.vue'; //import axios from 'axios'; export default { components: { SurveyResult, }, data() { return{ results: [] } }, methods:{ loadExperiences() { fetch('https://***.firebaseio.com/surveys.json') //axios.get('https://***.firebaseio.com/surveys.json') .then((response) => { if(response.ok) { return response.json(); } }) .then((data) => { const results = []; for (const id in data) { results.push({ id: id, name: data[id].name, rating: data[id].rating }); } this.results = results; }); }, }, }; // mounted(){ // axios.get('https://***.firebaseio.com/surveys.json').then(response => { // this.results = response.data; // }) // }, </script>

SurveyResult.vue

 <template> <li> <p> <span class="highlight">{{ name }}</span> rated the learning experience <span :class="ratingClass">{{ rating }}</span>. </p> </li> </template> <script> export default { props: ['name', 'rating'], computed: { ratingClass() { return 'highlight rating--' + this.rating; }, }, }; </script>

Los datos se representan en la página web correctamente en la página web mediante el método de obtención. ¿Hay alguna forma de usar axios.get en su lugar? Intenté usar la propiedad vue montada y hace que los datos aparezcan en una pantalla en blanco en formato json, pero quiero que los datos se muestren en la página web con los estilos y otros componentes vue juntos.

Así es como debería verse la página para el contexto: