I'm currently developing a Single Page Application (SPA) using Vue 3, TypeScript, and The Movie Database (TMDB).
This application showcases a list of movie cards.
Within the MoviesList component (src\components\MoviesList.vue), the following code is implemented:
<template>
<div class="row list">
<div v-for="movie in movies" :key="movie.id" class="col-xs-12 col-sm-6 col-lg-4 col-xl-3">
<MovieCard :movie="movie" :genres="genres" />
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import axios from 'axios';
import env from '../env';
import MovieCard from './MovieCard.vue';
export default defineComponent({
name: 'MoviesList',
components: {MovieCard},
props: {
listType: String
},
data() {
return {
pageTitle: "Now Playing",
movies: [],
genres: [],
}
},
mounted() {
this.getMovies();
this.getGenres();
},
methods: {
getMovies() {
axios.get(`${env.api_url}/movie/${this.$props.listType}?api_key=${env.api_key}`).then(response => {
this.movies = response.data.results;
})
.catch(err => console.log(err));
},
getGenres() {
axios.get(`${env.api_url}/genre/movie/list?api_key=${env.api_key}`).then(response => {
this.genres = response.data.genres;
console.log(this.genres);
})
.catch(err => console.log(err));
}
}
});
</script>
Within the MovieCard component (src\components\MovieCard.vue), the following code is implemented:
<template>
<div class="movie card">
<div class="thumbnail">
<img :src="`https://image.tmdb.org/t/p/w500/${movie.backdrop_path}`" :alt="movie.title" class="img-fluid" />
</div>
<div class="card-content">
<h2 class="card-title">{{ movie.title }}</h2>
<p class="card-desc">{{ movie.overview }}</p>
<span :title="`Score: ${movie.vote_average}`" class="score d-flex">{{ movie.vote_average }}</span>
</div>
<div class="card-footer">
<p class="m-0 release">Release date: {{ dateTime(movie.release_date) }}</p>
<p class="m-0 pt-1">
<a class="genre" v-for="genre in movie.genre_ids" :key="genre.id">
{{ getGenreName(genre) }}
</a>
</p>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import moment from 'moment';
export default defineComponent({
name: 'MovieCard',
props: {
movie: {
type: Object,
required: true
},
genres: {
type: Object,
required: true
}
},
methods: {
dateTime(value: any) {
return moment(value).format('MMMM DD, YYYY');
},
getGenreName(gid: number) {
if (this.genres[gid]) {
if (this.genres[gid].name.length) {
return this.genres[gid].name;
}
}
}
},
});
</script>
The Issue
To avoid displaying empty genre containers, I have utilized the following condition:
if (this.genres[gid].name.length) {
return this.genres[gid].name;
}
However, for reasons unknown to me, this approach is failing as shown below.
https://i.sstatic.net/Fiiiyl.jpg
Queries
- Where did I go wrong?
- What is the most foolproof method to achieve the desired outcome?