在 Vue 3 JS 中创建显示电影列表属性数组的对象

Question

我试图用 movie_properties 实现的是让它存储列表信息，如电影 ID、名称、流派、comingSoon、可用、缩略图和预览。

请注意，这是我正在使用的 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 class="navbar">
      <div class="netflix-logo">

        <ul>
          <li>Home</li>
          <li>TV Shows</li>
          <li>Movies</li>
          <li>New & Popular</li>
          <li>My List</li>
        </ul>

        <input class="search" 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");
});

Answer 1

请不要将此视为冒犯，但如果您不知道如何枚举或推送到数组 - 听起来您正试图从二年级跳到六年级，跳过那些 in-between ...

 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;
    });
  },

在 Vue 3 JS 中创建显示电影列表属性数组的对象

Creating object that displays an array of properties for movie list in Vue 3 JS

javascript

vue.js