Nuxt 和 axios：获取数据但不显示在网页中

Question

我在我的应用程序中使用 Nuxt、Axios 和 Vuetify，但是当我想通过 get 调用在浏览器中查看数据时，什么也没有出现，只有标题。我在 firebase 中有与电影名称、导演和电影海报相关的信息，但我看不到 none 个。

这是我的代码：

  <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>

Answer 1

你叫错了，重写为：

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

您可以使用 foreach 循环代替 for .. in：

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

Nuxt 和 axios：获取数据但不显示在网页中

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

firebase

axios

nuxt.js

vuetify.js