admin管理员组文章数量:1323354
I've tried to figure out what is happening with this one particular page I have as I get a list of warnings and an error every time I load it
[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 /?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 ReactiveEffectponentUpdateFn [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 ReactiveEffectponentUpdateFn [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
They all really make no sense to me other than the uncaught (in promise) and even that I'm very unsure about because when the page loads (the rating it says it can't read displays as it should). Can anyone tell me what the warning mean and if there is a way to fix them? This is the only page of my project that has this issue. I'll also leave my view here too and if someone might be able to tell my why the rating is throwing the error despite it displaying properly, that would be great!
<template>
<div class="movie-details">
<div class="route">
<h3>
<router-link to="/movies">
<span>Movies</span>
</router-link>
 / {{ 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 "@/ponents/Button.vue";
import ListItem from "@/ponents/ListItem.vue";
export default {
ponents: {
Button,
ListItem,
},
props: [
"id"
],
data() {
return {
movie: {},
moment,
videoEmbed: "/"
};
},
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>
I've tried to figure out what is happening with this one particular page I have as I get a list of warnings and an error every time I load it
[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/?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.ponentUpdateFn [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.ponentUpdateFn [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
They all really make no sense to me other than the uncaught (in promise) and even that I'm very unsure about because when the page loads (the rating it says it can't read displays as it should). Can anyone tell me what the warning mean and if there is a way to fix them? This is the only page of my project that has this issue. I'll also leave my view here too and if someone might be able to tell my why the rating is throwing the error despite it displaying properly, that would be great!
<template>
<div class="movie-details">
<div class="route">
<h3>
<router-link to="/movies">
<span>Movies</span>
</router-link>
 / {{ 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 "@/ponents/Button.vue";
import ListItem from "@/ponents/ListItem.vue";
export default {
ponents: {
Button,
ListItem,
},
props: [
"id"
],
data() {
return {
movie: {},
moment,
videoEmbed: "https://www.youtube./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>
Share
Improve this question
asked Dec 8, 2021 at 23:52
TapialjTapialj
3352 gold badges3 silver badges11 bronze badges
2 Answers
Reset to default 1Use lodash method _.get() to fix undefined error.
The _.get() method is used to get the value at path of object. If the resolved value is undefined, the defaultValue is returned in its place.
<script>
import _ from 'lodash';
export default {
methods: {
getValue(object, string, defaultValue = ''): {
return _.get(object, string, defaultValue)
}
}
</script>
<template>
{{ getValue(movie, 'rating.rating') }}
</template>
you can make it as global helper to use later in template
just use null safty like
movie?.rating?.rating
本文标签:
版权声明:本文标题:javascript - Vue warn unhandled error during execution of render function, of scheduler flush, and violation scroll-blocking - S 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742129830a2422109.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论