'Text and images not coming through correctly for VUE 3 Javascript

I have been trying to get the text and images to display correctly on my Netflix app, I am using VUE.js 3 to achieve this, however, there is something wrong with my code that is causing issues that are preventing the images and text from displaying correctly, and I am not sure what is causing the issue

I am using the comedy function only to test and see if something comes through.

outcome: Want images and text to display as you see on Netflix

import { movie } from "../js/Movie.js";

const USER_SIGNED_IN_KEY = "sign-in-user-storage-key";
const WATCHLIST_KEY = "watchlist-storage key";

Vue.createApp({
  data(){
    return{
      movies:[
        new movie("#6507", 
        "The Adam Project", 
        "Sci-Fi", 
        "false", 
        "106 minutes",
        "9 March 2022", 
        "https://occ-0-1254-34.1.nflxso.net/dnm/api/v6/9pS1daC2n6UGc3dUogvWIPMR_OU/AAAABQr8Qa4KG69tj9KcwskjJq9rAovupDtcPVlcu1T1aHKxXQqP98t3YNL4NYNN-Ll0eqQh8dFdaAtaGYD6Qj-_0x36cnUXstpp6-y5jRdaSXkmCDASTDlpZz1hBg.webp?r=6ef"),
        
        new movie("#7770", 
        "Here Comes The Boom", 
        "Comedy",
        "false",
        "105 minutes",
        "12 October 2012", 
        "https://occ-0-1254-34.1.nflxso.net/dnm/api/v6/9pS1daC2n6UGc3dUogvWIPMR_OU/AAAABazQ4Z5r1lg_fwOK_h2pWt_86Xtup4p7_Zz_a-V-xS1m9okvm1yMqjO1Yk5hDvQOLeAT3aUJkVYm55V9nvlNCt5I_hd4ICgtOadhUs31b-AK5gMSscBFB4COow.webp?r=657"),
        
        new movie("#2385", 
        "IZombie", 
        "Crime",
        "false",
        "42 minutes",
        "17 March 2015", 
        "https://occ-0-1254-34.1.nflxso.net/dnm/api/v6/X194eJsgWBDE2aQbaNdmCXGUP-Y/AAAABen4hrWdW8EPoWoGmgQZyXKe0LkHSS5s3_EWpdbkugkIze06dsgFELnnW8fe6eq23UEIjsQsfjzGhA0epNzbpCZLHurJ9Tw48y4_.webp?r=c0e"),

        new movie("#2892", 
        "The Witcher", 
        "Fantasy",
        "false",
        "47-67 minutes", 
        "20 December 2019", 
        "https://occ-0-1254-34.1.nflxso.net/dnm/api/v6/9pS1daC2n6UGc3dUogvWIPMR_OU/AAAABSzFqrewVma8qubSm2ufZ5Y8-Q8s32hhyv7zOLJZIbqp_0FwjVn0kE1ZvNxJfk3hmTPqgz_4C9d48OIXS9FNiZ-COLqm9edtB8dFgcijpFjJn5w4T6mfmY8yNg.webp?r=6a6"),

        new movie("#8679", 
        "The Fighter", 
        "Drama", 
        "false", 
        "116 minutes",
        "25 February 2011", 
        "https://occ-0-1254-34.1.nflxso.net/dnm/api/v6/E8vDc_W8CLv7-yMQu8KMEC7Rrr8/AAAABdOBQIok_7x8t8a2XGbRkjMGRcKjpMArjfho0Fo3uL8MQn_7vG9l-IrA4_Fe7HN1tWRTWwAqNMl9BG3l_20GSdXPAL-gxv0cJ8Uk.webp?r=53e"),

        new movie("#7859",
        "Jackass 3.5",
        "Comedy",
        "false",
        "84 minutes",
        "14 June 2011",
        "https://occ-0-1254-34.1.nflxso.net/dnm/api/v6/E8vDc_W8CLv7-yMQu8KMEC7Rrr8/AAAABZ2iBUWD19pSI3OASFvafY-rKoS7CcLNuY-sfep5JHKFAfRYcV-GoKUTuJMCk7h57UagK-LNDF_25OShrmAaRUfJw_RJwPJy6zSk.webp?r=88c")
      ],

      users: [],
      username:"",
      comingSoon:[],
      showByIndex:null,
    };
  },

  computed:{
    moviesComingsoon(){
      return this.movies.filter((movie) => {
        return !movie.comingSoon;
      });
    },

    availMovies(){
      return this.movies.filter((movie) =>{
        return !movie.comingSoon;
      });
    },
  },

  comedy(){
    return this.movies.filter((movie) =>{
      return movie.genre === "comedy" && !movie.comingSoon;
    });
  },

  crime(){
    return this.movies.filter((movie) =>{
      return movie.genre === "Crime" && !movie.comingSoon;
    });
  },

  drama(){
    return this.movies.filter((movie) =>{
      return movie.genre === "Drama" && !movie.comingSoon;
    });
  },

  fantasy(){
    return this.movies.filter((movie) =>{
      return movie.genre === "Fantasy" && !movie.comingSoon;
    });
  },

  
  methods:{
    watchList(index){
      if(!localStorage.getItem(WATCHLIST_KEY)){
        let watchList=[];
        watchList.push(this.availMovies[index]);
        localStorage.setItem(WATCHLIST_KEY, JSON.stringify(watchList));
      }
      else{
        let watchList = JSON.parse(localStorage.getItem(WATCHLIST_KEY));

        watchList.push(this.availMovies[index]);
        localStorage.setItem(WATCHLIST_KEY, JSON.stringify(watchList));
    }
  },
},

  watchList(){
    window.location.href = "../pages/watchList.html";
  },

  logout(){
    localStorage.removeItem(USER_SIGNED_IN_KEY);
    window.location.href = ".../../index.html";
  },


  mounted(){
    this.users = JSON.parse(localStorage.getItem(USER_SIGNED_IN_KEY))
    this.username = this.users[0]._username
  },
})

.mount("#netflixapp");

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <link rel="stylesheet" href="/css/home.css">
  <script src="https://unpkg.com/vue@3" defer></script>
  <script src="../js/home.js" type="module" defer></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
    crossorigin="anonymous"></script>
  <title>Netflix</title>
</head>

<body>
  <div id="netflixapp">

    <header>
      <div class="navbar">

        <div class="netflix-logo">
          <img src="../images/netflix.svg" alt="">
        </div>
        <ul>
          <li>Home</li>
          <li>TV Shows</li>
          <li>Movies</li>
          <li>New & Popular</li>
          <li @click="watchList">My List</li>
          <li id="username">{{username}}</li>
          <li><a class="logout" @click="logout"></a>Logout</li>
        </ul>
      </div>


      <div class=slideShow>
        <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
          <div class="carousel-indicators">
            <template v-for="(slide,index) in moviesComingSoon">
              <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="index"
                :class="{active: index ===0}" aria-current="index === 0" aria-label="slide.name"></button>
              <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="index"
                :class="{active: index ===0}" aria-current="index === 1" aria-label="slide.name"></button>
              <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="index"
                :class="{active: index ===0}" aria-current="index === 2" aria-label="slide.name"></button>
            </template>
          </div>
        </div>
      </div>
    </header>

    <div v-for="m in movies">
      {{m}}
    </div>


    <main>
      <div class="carousel-inner">
        <template v-for="(slide, index) in moviesComingsoon">
          <div :class="{'carousel-item': true, active: index === 0}">
            <img :src="movie.name" class="d-block w-100" alt="Movie Coming Soon">
            <div class="carousel-caption d-none d-md-block">
              <h5>{{slide.name}}</h5>
              <p>{{slide.availDate}}</p>
            </div>
          </div>
          <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions"
            data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
          </button>
          <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions"
            data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
          </button>
        </template>
      </div>
      <!-- </div> -->
      
      <section>
        <div class="movies">

          <div class="movie-genre">
            <h2>Comedy</h2>
          </div>

          <ul class="list-of-movies">
            <li v-for="(movie, index) in comedy" :key="movies.id" @mouseover="movie.slideshowindex = index"
              @mouseout="movie.slideshowindex = null" :class="{'list-card':movie.slideshowindex}"></li>
          </ul>


          <div class="card">
            <img src="Movie.thumbnail" class="card-img-top" alt="Movie Image">
            <div class="card-body" v-show="movies.showByIndex === index">
              <div class="movie-info"></div>
              <p class="card-text">{{movies.name}}</p>
              <p class="card-text">{{movies.duration}} • {{movies.genre}}</p>
            </div>
          </div>


        </div>
      </section>
    </main>

  </div>
</body>

</html>

javascript vue.js

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Text and images not coming through correctly for VUE 3 Javascript

Sources

Related Questions