问Vue警告在执行呈现函数、调度程序刷新和违规滚动阻塞时未处理的错误。

EN

[Vue warn]: Unhandled error during execution of render function 
  at <MovieDetails id="5" onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <App>


[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/vue-next 
  at <MovieDetails id="5" onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <RouterView> 
  at <App>

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'rating')
    at Proxy.render (MovieDetails.vue?e6ee:14)
    at renderComponentRoot (runtime-core.esm-bundler.js?5c40:444)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js?5c40:4211)
    at ReactiveEffect.run (reactivity.esm-bundler.js?a1e9:160)
    at setupRenderEffect (runtime-core.esm-bundler.js?5c40:4337)
    at mountComponent (runtime-core.esm-bundler.js?5c40:4120)
    at processComponent (runtime-core.esm-bundler.js?5c40:4078)
    at patch (runtime-core.esm-bundler.js?5c40:3673)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js?5c40:4288)
    at ReactiveEffect.run (reactivity.esm-bundler.js?a1e9:160)

5[Violation] Added non-passive event listener to a scroll-blocking <some> event. Consider marking event handler as 'passive' to make the page more responsive. See <URL>

[Violation] 'setTimeout' handler took 96ms www-embed-player.js:575 

<template>
  <div class="movie-details">
    <div class="route">
      <h3>
        <router-link to="/movies">
          <span>Movies</span>
        </router-link>
        &emsp;/&emsp;{{ movie.title }}
      </h3>
    </div>

    <div class="flex row">
      <h1>{{ movie.title }} <span class="subtitle">({{ moment(movie.releaseDate).format("YYYY") }})</span></h1>
      <Button title="Edit" @btn-click="editMovie(this.id)" />
    </div>

    <div class="flex flex-info info">
      <span class="details">{{ movie.rating.rating }}</span> |
      <span class="details">{{ movie.movieLength }}</span> |
      <span class="details">{{ movie.genre.genre }}</span> |
      <span class="details">{{ moment(movie.releaseDate).format("D MMMM YYYY") }}</span>
    </div>
    
    <div class="youtube">
      <iframe width="640" height="360" :src="videoEmbed" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>

    <div class="cast-crew grid">
      <div class="director">
        <h2>Directed By:</h2>
        
        <router-link :to="{name: 'DirectorDetails', params: {id: movie.director.id }}">
          <ListItem>
            {{ movie.director.firstName }} {{ movie.director.lastName }}
          </ListItem>
        </router-link>
      </div>
      <aside class="cast">
        <h2>Actors:</h2>
        <div class="actors grid">
          <div :key="actor.id" class="actor" v-for="actor in movie.actors">
            <router-link :to="{name: 'ActorDetails', params: {id: actor.id}}">
              <ListItem>
                {{ actor.firstName }} {{ actor.lastName }}
              </ListItem>
            </router-link>
          </div>
        </div>
      </aside>
    </div>
  </div>
</template>

<script>
  import moment from "moment";
  import Button from "@/components/Button.vue";
  import ListItem from "@/components/ListItem.vue";

  export default {
    components: {
      Button,
      ListItem,
    },
    props: [
      "id"
    ],
    data() {
      return {
        movie: {},
        moment,
        videoEmbed: "https://www.youtube.com/embed/"
      };
    },
    methods: {
      editMovie(id) {
        this.$router.push({name: "EditMovie", params: { id: id }});
      },
      async fetchMovie(id) {
        const res = await fetch(`api/movies/${id}`);
        const data = await res.json();

        return data;
      }
    },
    async created() {
      this.movie = await this.fetchMovie(this.id);
      
      //eslint-disable-next-line
      const reg = new RegExp('.*?=\s*(.*)');
      const split = reg.exec(this.movie.trailerUrl);
      this.videoEmbed += split[1];
    }
  }
</script>

<style scoped>
  h1 {
    font-weight: bold;
  }

  .subtitle {
    font-weight: 400;
    font-size: 1rem;
  }

  .info {
    font-weight: 300;
    letter-spacing: 1px;
  }

  .details {
    margin: 0 0.8rem;
  }

  .details:first-child {
    margin-left: 0;
  }

  .details:last-child {
    margin-right: 0;
  }

  .youtube {
    margin: 1.5rem 0;
    display: flex;
  }

  .youtube iframe {
    justify-self: flex-start;
    border-radius: 8px;
  }

  .cast-crew {
    height: 110%;
  }

  .cast-crew.grid {
    grid-template-columns: auto 75%;
  }

  .cast-crew a {
    font-weight: bold;
    font-size: 1.125rem;
  }

  .director {
    align-self: flex-start;
    text-align: left;
  }

  .cast {
    padding-left: 1.5rem;
    text-align: left;
    border-left: 2px solid #000;
    align-self: flex-start;
  }

  .actors.grid {
    grid-template-rows: repeat(4, 1fr);
    grid-template-columns: auto;
    gap: 0.75rem;
    grid-auto-flow: column;
    justify-content: flex-start;
  }
</style>