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>

CodePudding user response：

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,
  });
});