0

I'm working on rendering an array of movies but i don't want all of my movies to be rendered in one row (div). How can I say, after the 4th movie render the rest of them below - is that possible?

I guess i could make a new array for each section to be rendered but if there is a better way any help is appreciated.

Screenshot of project

Movies:[
      {MovieName: 'Venom (2018)',rating: 7 , imgPath: 'Venom.png'},
      {MovieName: 'Black Panther (2018)', rating: 9 , imgPath: 'BlackPanther.png'},
      {MovieName: 'Tenet (2020)',rating: 8 , imgPath: 'Tenet.png'},
      {MovieName: 'ProjectPower',rating: 8 , imgPath: 'ProjectPower.png'},
      {MovieName: 'After',rating: 8.5, imgPath: 'After.png'},
      {MovieName: 'MoonLight',rating: 9, imgPath: 'MoonLight.png'},
      {MovieName: 'Us',rating: 8 , imgPath: 'Us.png'},
    ]

<div class="MoviesContainer">
    <div class="Movies" v-for="(movie,index) in filteredMovies" :id="index">
      <img class="image_img" :src="require('../assets/MoviesMap/' + movie.imgPath)">
      <div class="image_Overlay">
        <button @click="addedMovie">Add to Favorites</button>
        <p>Watch {{movie.MovieName}}</p>
      </div>
    </div>
  </div>
tripleee
  • 175,061
  • 34
  • 275
  • 318
GunZz
  • 25
  • 4
  • Break up the array of items into two arrays. Use the [Array.prototype.splice](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice) function to extract the first four items from the array and render the remaining below. – Abir Taheer Sep 16 '21 at 22:40
  • @AbirTaheer thank you ill try it out – GunZz Sep 16 '21 at 22:49
  • slice can cut the array, not splice https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice – Nice Books Sep 17 '21 at 06:44
  • @tripleee kind of but i still want to be able to chose the amount of movies per row – GunZz Sep 17 '21 at 11:56

0 Answers0