我試圖用movie_properties它來實作它，它存盤串列資訊，如電影 ID、名稱、流派、即將上映、可用、縮略圖和預覽。
請注意，這是我正在使用的 API 呼叫，所有資訊都在其中。我只需要知道我所做的是否正確，以及如何將上述資訊從串列中推送到各自的組中。
Vue.js 代碼
const url = "https://project-apis.codespace.co.za/api/movies";
const watchlistEndpoint = " https://project-apis.codespace.co.za/api/list";
const { createApp } = window.Vue;
const getData = () =>
new Promise((resolve) => {
fetch(url)
.then((response) => response.json())
.then((json) => json.data.map((item) => item.name))
.then((names) => resolve(names));
});
const component = {
data() {
return {
movie_properties:{
id:[],
names:[],
genre:[],
comingSoon:[],
avalable:[],
thumbnail:[],
preview:[]
},
list: [],
search: ''
}
},
computed:{
filteredList(){
return this.list.filter(item => item.includes(this.search))
},
createID(){
return this.list.id()
}
},
mounted() {
getData().then((resolveData) => { this.list = resolveData;})
},
template: /*HTML Elements*/
`<div v-if="list.length < 1">Fetching data...</div>
<div v-else>
<div >
<div >
<ul>
<li>Home</li>
<li>TV Shows</li>
<li>Movies</li>
<li>New & Popular</li>
<li>My List</li>
</ul>
<input v-model="search">
</div>
<ul>
<li v-for="item in filteredList">{{ item }}</li>
</ul>
</div>
`
}
window.addEventListener("DOMContentLoaded", () => {
const app = createApp(component);
app.mount("#netflixApp");
});
uj5u.com熱心網友回復：
請不要將此視為冒犯，但如果您不知道如何列舉或推送到陣列 - 聽起來您正試圖從二年級跳到六年級，跳過中間的那些......
mounted() {
getData().then((resolveData) =>
{
this.list = resolveData;
const result = {
id:[],
names:[],
genre:[],
comingSoon:[],
available:[],
thumbnail:[],
preview:[]
};
const tmp = new Date();
const today = tmp.getFullYear() '-' String(tmp.getMonth() 1).padStart(2, '0') '-' String(tmp.getDate()).padStart(2, '0');
resolveData.forEach(movie =>
{
result.id.push(movie.id);
result.names.push(movie.name);
result.comingSoon.push(movie.is_coming_soon > 0);
result.thumbnail.push(movie.image);
result.preview.push(movie.description);
result.available.push(movie.release_date <= today);
});
this.movie_properties = result;
});
},
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/466017.html
標籤：javascript Vue.js
上一篇：單獨檔案中的Vue3組件