Блог

Я попытался выяснить, что происходит с этой конкретной страницей, поскольку каждый раз, когда я ее загружаю, я получаю список предупреждений и сообщение об ошибке

 [Vue warn]: Unhandled error during execution of render function   at lt;MovieDetails id="5" onVnodeUnmounted=fnlt;onVnodeUnmountedgt; ref=Reflt; undefined gt; gt;   at lt;RouterViewgt;   at lt;Appgt;   [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 lt;MovieDetails id="5" onVnodeUnmounted=fnlt;onVnodeUnmountedgt; ref=Reflt; undefined gt; gt;   at lt;RouterViewgt;   at lt;Appgt;  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 lt;somegt; event. Consider marking event handler as 'passive' to make the page more responsive. See lt;URLgt;  [Violation] 'setTimeout' handler took 96ms www-embed-player.js:575   

Все они действительно не имеют для меня никакого смысла, кроме неучтенного (в обещании), и даже в этом я очень не уверен, потому что при загрузке страницы (рейтинг, в котором говорится, что она не может читать, отображается так, как должно). Может ли кто-нибудь сказать мне, что означает это предупреждение и есть ли способ их исправить? Это единственная страница моего проекта, на которой есть эта проблема. Я также оставлю здесь свое мнение, и если кто-нибудь сможет объяснить мне, почему рейтинг выдает ошибку, несмотря на то, что она отображается правильно, это было бы здорово!

 lt;templategt;  lt;div class="movie-details"gt;  lt;div class="route"gt;  lt;h3gt;  lt;router-link to="/movies"gt;  lt;spangt;Movieslt;/spangt;  lt;/router-linkgt;  amp;emsp;/amp;emsp;{{ movie.title }}  lt;/h3gt;  lt;/divgt;   lt;div class="flex row"gt;  lt;h1gt;{{ movie.title }} lt;span class="subtitle"gt;({{ moment(movie.releaseDate).format("YYYY") }})lt;/spangt;lt;/h1gt;  lt;Button title="Edit" @btn-click="editMovie(this.id)" /gt;  lt;/divgt;   lt;div class="flex flex-info info"gt;  lt;span class="details"gt;{{ movie.rating.rating }}lt;/spangt; |  lt;span class="details"gt;{{ movie.movieLength }}lt;/spangt; |  lt;span class="details"gt;{{ movie.genre.genre }}lt;/spangt; |  lt;span class="details"gt;{{ moment(movie.releaseDate).format("D MMMM YYYY") }}lt;/spangt;  lt;/divgt;    lt;div class="youtube"gt;  lt;iframe width="640" height="360" :src="videoEmbed" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreengt;lt;/iframegt;  lt;/divgt;   lt;div class="cast-crew grid"gt;  lt;div class="director"gt;  lt;h2gt;Directed By:lt;/h2gt;    lt;router-link :to="{name: 'DirectorDetails', params: {id: movie.director.id }}"gt;  lt;ListItemgt;  {{ movie.director.firstName }} {{ movie.director.lastName }}  lt;/ListItemgt;  lt;/router-linkgt;  lt;/divgt;  lt;aside class="cast"gt;  lt;h2gt;Actors:lt;/h2gt;  lt;div class="actors grid"gt;  lt;div :key="actor.id" class="actor" v-for="actor in movie.actors"gt;  lt;router-link :to="{name: 'ActorDetails', params: {id: actor.id}}"gt;  lt;ListItemgt;  {{ actor.firstName }} {{ actor.lastName }}  lt;/ListItemgt;  lt;/router-linkgt;  lt;/divgt;  lt;/divgt;  lt;/asidegt;  lt;/divgt;  lt;/divgt; lt;/templategt;  lt;scriptgt;  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];  }  } lt;/scriptgt;  lt;style scopedgt;  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;  } lt;/stylegt;  

Используйте метод lodash get для исправления неопределенной ошибки

  lt;scriptgt; import _ from 'lodash'; export default { methods: {  getValue(object, string, defaultValue = ''): {  return _.get(object, string, defaultValue)  } } lt;/scriptgt; lt;templategt;  {{ getValue(movie, 'rating.rating') }} lt;/templategt;   

вы можете сделать его глобальным помощником для последующего использования в шаблоне