traxxx/assets/components/movies/movies.vue

50 lines
700 B
Vue
Raw Normal View History

2020-07-25 01:44:19 +00:00
<template>
<div class="movies">
<div class="tiles">
<Movie
v-for="movie in movies"
:key="`movie-${movie.id}`"
:movie="movie"
/>
</div>
2020-07-25 01:44:19 +00:00
</div>
</template>
<script>
import Movie from './tile.vue';
async function mounted() {
const { movies, totalCount } = await this.$store.dispatch('fetchMovies', {
limit: 30,
});
this.movies = movies;
this.totalCount = totalCount;
}
export default {
components: {
Movie,
},
data() {
return {
movies: [],
totalCount: 0,
};
},
mounted,
};
</script>
2020-07-25 01:44:19 +00:00
<style lang="scss">
.movies {
padding: 1rem;
}
.tiles {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr));
grid-gap: 1rem;
}
2020-07-25 01:44:19 +00:00
</style>