Apologies for the extensive text. All of my router-views are functioning properly, except for one specific view which appears blank. Despite meticulously reviewing the code multiple times, I cannot identify any errors or warnings in the console. The structure and format of the problematic view is identical to others, with the only difference being the template itself. Previously, this was working fine, but due to complications in my package.json and dependencies, I had to start a new project. If you prefer, here's a link to a sandbox: https://codesandbox.io/s/condescending-monad-5o8qw
<template>
<div class="review-movie-detail">
<div class="movie-image">
<img :src="(`https://image.tmdb.org/t/p/original/${movie.poster_path}`)" alt="Movie Poster" />
</div>
<table class="movie-rating-details">
<tr> <h2>{{movie.original_title}}</h2> </tr>
<p> </p>
<tr>Gore rating: <span class="emojiRatings" >{{getGoreEmoji()}} </span></tr>
<tr><input v-model = "goreRating" type="range" min="1" max="100" class="slider" id="myRange"></tr>
<tr> <div class="star-rating"> <star-rating v-model="rating"> </star-rating></div></tr>
<tr><b-button class="block-button">Submit review</b-button></tr>
</table>
</div>
</template>
<script>
import { ref, onBeforeMount } from 'vue';
import env from '@/env.js'
import { useRoute } from 'vue-router';
import StarRating from 'vue-star-rating'
export default {
components : {StarRating},
setup () {
const movie = ref({});
const route = useRoute();
onBeforeMount(() => {
fetch(`https://api.themoviedb.org/3/movie/${route.params.id}?api_key=${env.apikey}`)
.then(response => response.json())
.then(data => {
movie.value = data;
});
});
return {
movie
}
},
data() {
return {
goreRating: '50',
shockRating : '50',
jumpRating: '50',
plotRating: '50',
supernaturalRating: '50',
rating: '3.5'
}
},
methods: {
getGoreEmoji() {
let emojiRating = ["🩸", "🩸🩸", "🩸🩸🩸", "🩸🩸🩸🩸", "🩸🩸🩸🩸🩸", "🩸🩸🩸🩸🩸🩸"]
return emojiRating[(Math.floor(this.goreRating/20))]
},
}
}
Here is my router configuration:
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import MovieDetail from '../views/MovieDetail.vue'
import ReviewMovie from '../views/ReviewMovie.vue'
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/movie/:id',
name: 'Movie Detail',
component: MovieDetail
},
{
path: '/movie/:id/review',
name: 'Review Movie',
component: ReviewMovie
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
Lastly, my app.Vue to display the router view...
<template>
<div>
<header>
<GoBack />
<router-link to="/">
<h1><span>Horror</span>Hub</h1>
</router-link>
</header>
<main>
<router-view></router-view>
</main>
</div>
</template>
<script>
import GoBack from "@/./components/GoBack"
export default {
components: {
GoBack
}
}
</script>
Could someone kindly assist me in identifying the underlying cause of this issue? Thank you.