我正在使用vue-router和Vue 3。我有一個視圖，我想利用路由器的url并使用它來呼叫一個方法來訪問API。這個方法回傳一個承諾，我可以用它來填充我的頁面。當用'route.params.id'呼叫我的方法時，它說這個引數是未定義的。當我使用 console.log(route.params.id) 時，它在控制臺中顯示正確。我試著用一個計算的屬性來代替，但我有同樣的問題。
設定代碼：
從 "vue "匯入{ ref }。
從"./api/MovieApiService "中匯入MovieApiService。
從 "vue-router "中匯入 { useRoute }。
輸出默認 {
setup() {
const movie = ref([]);
const route = useRoute();
MovieApiService.getMovie(route.params.id).then((response) => {
movie.value = response.data.results;
});
回傳 {
電影。
};
},
方法。{},
};
正在呼叫的方法：
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((回應) => {
movie.value = response.data.results;
console.log(movie.value)。
});
我應該如何確保在呼叫我的方法時這個值是可用的呢？
uj5u.com熱心網友回復：
你把route.params.id作為一個變數給getMovie(body)。
然后你在你的URL中使用body.id。這將等于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}`
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/327591.html
標籤：