Vue路由器-视图没有显示所有视图

Question

抱歉短信太重了。我所有的路由器视图都可以工作，除了一个，它显示为空白。我没有看到任何控制台错误的警告和格式是相同的视图-唯一的区别是模板。这是可行的，但我启动了一个新项目，因为我的package.json和依赖关系变得很混乱。我已经阅读了国家博物馆的代码，我只是不知道为什么它不会显示。代码是浓缩的，因为有很多。如果您愿意，这里有一个指向沙箱：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))]
},

}
}

这是我的路由器：

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

和app.Vue显示路由器视图..。

<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>

我怎样才能找到这个问题的根本原因(双关意)？

Answer 1

在使用Vue 3时，需要使用vue-star-rating@next

npm install vue-star-rating@next
or
yarn add vue-star-rating@next

在package.json中，应该是

"vue-star-rating": "^2.1.0"

并使用新的语法。

<star-rating v-model:rating="rating"></star-rating>

以下是工作代码框：

https://codesandbox.io/s/little-sea-xccm4?file=/src/views/ReviewMovie.vue