Verwenden Sie Vue, um detaillierte Informationen zu einem bestimmten Film auf Douban Movies abzurufen. Die Daten wurden erfolgreich abgerufen und das Durchschnittsattribut wurde auch erfolgreich auf der Seite angezeigt, aber die Konsole meldet einen Fehler.

<template>
    <p id="movie-detail">
        <p class="movie-card">
            <h2>{{detail.title}}</h2>
            <h4>({{detail.original_title}})</h4>
            <section class="movie-intro">
                <p class="left">
                <!--就是这部分代码报错-->
                    <mt-cell>
                        <span v-if='detail.rating.average!=0'>{{detail.rating.average}}分</span>
                        <span v-else>暂无评分</span>
                        <img v-for="starNum in Math.round(detail.rating.average/2)" slot="icon" src="../../static/images/ratingStar.png" width="18" height="18">
                    </mt-cell>
                </p>
            </section>
        </p>
    </p>
</template>
<script>
export default {
    data() {
            return {
                movieID: '',
                detail: []
            }
        },
        created: function() {
            var that = this;
            this.$http.get('http://127.0.0.1:8081/movie/subject/' + that.$route.params.id)
                .then(function(response) {
                    that.detail = response.data;
                }).catch(function(error) {
                    console.log(error);
                });
        },
        mounted: function() {
            this.movieID = this.$route.params.id;
        }
}
</script>