为什么是“route.params.Id '在设置方法中不可用/未定义?

2022-01-30 15:08:56 标签 vue.jsvue-componentvue-routervuejs3

我正在使用Vue -router和Vue 3。我有一个视图,我想采取路由器的url,并使用它来调用一个方法访问一个API。这个方法返回一个我可以用来填充我的页面的承诺。当调用我的方法与'route。params。它表示该参数是未定义的。当我执行console。log(route。params。id)时,它在控制台中显示正确。我已经尝试使用计算属性代替,但我有相同的问题。

设置代码:

import { ref } from "vue";
import MovieApiService from "../api/MovieApiService";
import { useRoute } from "vue-router";
export default {
  setup() {
    const movie = ref([]);
    const route = useRoute();
    MovieApiService.getMovie(route.params.id).then((response) => {
      movie.value = response.data.results;
    });
    return {
      movie,
    };
  },
  method: {},
};

方法被调用:

static getMovie(body: GetMovieByTmdbId) {
    return axios.get(
      `https://api.themoviedb.org/3/movie/${body.id}?api_key=${apiKey}`
    );
  }

这是我试图用相同的结果来计算的性质。

setup() {
    const route = useRoute();
    const id = computed(()=>{return route.params.id})
    const movie = ref([]);
    getMovie(id).then((response) => {
      movie.value = response.data.results;
      console.log(movie.value);
    });

我应该如何确保这个值是可用的,当我调用我的方法?

# # #你给route.params.id as a variable to getMovie(body).

然后你在使用身体。id在你的URL。这将等于route。params。id。id,它没有定义。

在你的URL中使用body或将参数改为id,这样更有意义。

是这样的:

...
const route = useRoute();
MovieApiService.getMovie(route.params.id).then((response) => {
  movie.value = response.data.results;
});
...
const getMovie = (id) => {
  return axios.get(
    `https://api.themoviedb.org/3/movie/${id}?api_key=${apiKey}`
  );
}
阅读全文

▼ 版权说明

相关文章也很精彩
推荐内容
更多标签
相关热门
全站排行
随便看看

错说 cuoshuo.com —— 程序员的报错记录

部分内容根据CC版权协议转载;网站内容仅供参考,生产环境使用务必查阅官方文档

辽ICP备19011660号-5

×

扫码关注公众号:职场神器
发送: 1
获取永久解锁本站全部文章的验证码