Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Nuxt and axios: get data but does not show up in the web page

I’m working in my app with Nuxt, Axios and Vuetify but when I want to see the data in the browser from the get call nothing appears, only the title. I have a info in firebase related to movie name, director and a poster of the movie but I can’t see none of them.

This is my code:

  <template>
     <div>
        <v-app>
          <v-container>
            <h2>PelĂ­culas</h2>
              <ul>
                <li v-for="peli in datosPelicula" :key="peli.id">
                     {{datosPelicula.nombre}}
                     {{datosPelicula.director}}
                     {{datosPelicula.imagen}}
               </li>
             </ul>
          </v-container>
       </v-app>
    </div>

  </template>

   <script>
     import axios from 'axios'
     export default {
      data() {
       return {
           datosPelicula: [],
      }
    },
      methods:{
       obtenerPeliculas(){
        axios.get('https://proyecto-final-cf888-default-rtdb.firebaseio.com/' + 
         'peliculas.json')
        .then( (res)=>{
        let results=[];
        console.log(res);
        for (let id in res.data){
        console.log(id);
        console.log(res.data[id]);
        results.push({
           id: id, 
           nombre: res.data[id].nombre,
           director: res.data[id].director,
           imagen: res.data[id].imagen,
        });
      }
      this.datosPelicula= results;
      })
      .catch((error)=>{
      console.log(error) 
    })       
   }
  }, 
   created(){
   this.obtenerPeliculas();
  }
 }; 
</script>

 <style scoped>
 .div{
 height: 100%;
 width: auto;
 }
 </style>

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

>Solution :

You calling it wrong, rewrite it to:

            <li v-for="peli in datosPelicula" :key="peli.id">
                 {{peli.nombre}}
                 {{peli.director}}
                 {{peli.imagen}}
           </li>

Instead of for .. in you can use an foreach loop:

res.data.forEach(({ nombre, director, imagen }, id) => {
  results.push({
    id,
    nombre,
    director,
    imagen,
  });
});
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading