我正在使用 Vue 3、TypeScript 和电影数据库 (TMDB) 开发 SPA。
该应用程序显示列表电影卡.
In the 电影列表成分 （src\components\MoviesList.vue）， 我有：
<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>
In the 电影卡成分 （src\components\MovieCard.vue）， 我有：
<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>
我使用以下条件来确保不显示空的流派限制：
if (this.genres[gid].name.length) {
return this.genres[gid].name;
}
由于我无法理解的原因，这失败了，如下所示。
问题之一是您使用:key="genre.id"作为关键。然而v-for="genre in movie.genre_ids"告诉我们genre可能是一个 ID（号码）。所以genre.id可能会导致undefined，这意味着每次迭代都有相同的key。这可能会导致渲染问题。
接下来，空标签还告诉我们没有返回值{{ getGenreName(genre) }}.
您已包含大量 if 语句来尝试解决此问题，但如果流派 ID 不存在于this.genres函数返回undefined。如果流派名称为空，也会发生同样的情况。您将返回而不是返回空字符串undefined，这会产生几乎相同的结果。
为了解决这个问题，我们首先问以下问题。如果电影类型 ID 不存在于this.genres。您加载了所有类型吗？ API 可能会对响应进行分页，这意味着您必须执行多次调用才能获取完整的流派列表。
如果您确定已加载所有流派，并且确实存在与流派不匹配的流派 ID，或名称为空的流派。我们可以使用计算属性来解决这个问题。
computed: {
movieGenres() {
return this.movie.genre_ids
.filter(genre_id => genre_id in this.genres)
.map(genre_id => this.genres[genre_id])
.filter(genre => genre.name.length > 0);
}
}
现在而不是循环遍历movie.genre_ids你可以循环遍历movieGenres反而。
<a class="genre" v-for="genre in movieGenres" :key="genre.id">
{{ genre.name }}
</a>
注意genre上面是实际的流派对象，而不仅仅是一个 ID。这是由于.map(genre_id => this.genres[genre_id])我们在计算属性中执行此操作。
除了使用计算属性之外，还可以选择改进数据传输。您可以在收到 API 响应时对数据进行排序，而不是将“无效”数据作为属性传递。