movie-vue-create

index.html

<div id="app">
  <!-- navigation -->
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="./index.html">Movie List</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="index.html">Home
            <span class="sr-only">(current)</span>
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="favorite.html">favorite</a>
        </li>
      </ul>
    </div>
  </nav>

  <div class="container mt-5">
    <!--search bar-->
    <div class="row" id="search-bar">
      <form id="search" class="form-inline">
        <label class="sr-only" for="inlineFormInputName2">Name</label>
        <input v-model="searchingMovie" type="text" class="form-control mb-2 mr-sm-2" id="search-input" placeholder="search name ...">
        <button @click.prevent="searchMovie" type="submit" class="btn btn-primary mb-2">Search</button>
      </form>
    </div>

    <!-- data-panel -->
    <div class="container mt-5">
      <div class="row" id="data-panel">
        <!-- print movie list here -->
        <div class="col-sm-3" v-for="movie in filteredMovies" :key="movie.id">
          <div class="card mb-2">
            <img class="card-img-top " :src="movie.image" alt="Card image cap">
            <div class="card-body movie-item-body">
              <h5 class="card-title">{{movie.title}}</h5>
            </div>
            <!-- "More" button -->
            <div class="card-footer">
              <button @click="showMovie(movie)" class="btn btn-primary btn-show-movie" data-toggle="modal" data-target="#show-movie-modal">More</button>
            </div>

          </div>
        </div>

      </div>
    </div>
    <!-- Modal -->
    <div class="modal fade" id="show-movie-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
      <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="show-movie-title">{{singleMovie.title}}</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <div class="modal-body" id="show-movie-body">
            <div class="row">
              <img class="col-sm-8" id="show-movie-image" :src="singleMovie.image">
              <div class="col-sm-4">
                <p><em id="show-movie-date">release at :{{singleMovie.release_date}}</em></p>
                <p id="show-movie-description">{{singleMovie.description}}</p>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>

index.js

const BASE_URL = "https://movie-list.alphacamp.io";
const INDEX_URL = BASE_URL + "/api/v1/movies/";
const POSTER_URL = BASE_URL + "/posters/";
const filters = {
  all: (movies) => movies,
  searched: (movies, searchingMovie) =>
    movies.filter((movie) => movie.title.toLowerCase().includes(searchingMovie))
};

new Vue({
  el: "#app",
  data: {
    searchingMovie: "",
    movies: [],
    singleMovie: [],
    // searchedMovie: [],
    visibility: "all"
  },
  created() {
    //用 axios 接入 API 資料
    axios
      .get(INDEX_URL)
      .then((response) => {
        // map() 透過函式內回傳的值組合成一個陣列
        // 故很適合用在將原始變數運算後，重新組合一個新陣列的情境
        // 這裡用箭頭函式，沒用花括號，代表會自動加 return，return 一個物件
        // 用展開運算子和物件搭配，拷貝物件但做局部修改，key 重覆時，會以後面出現的為準
        this.movies = response.data.results.map((movie) => ({
          ...movie,
          //拿到原本的屬性、且修改了 image ，才存回 movies
          image: POSTER_URL + movie.image
        }));
      })
      .catch((error) => console.log(error));
  },
  methods: {
    //顯示電影詳情
    showMovie(movie) {
      //接收被 click 的那個 item
      console.log(movie.id);
      //在全部電影裡面，尋找到 id 和被 click 相同的那部，存進 singleMovie
      this.singleMovie = this.movies.find((_movie) => _movie.id === movie.id);
      console.log(this.singleMovie);
    },
    // searchMovie() {
    //   this.searchedMovie = this.movies.filter((movie) =>
    //     movie.title.toLowerCase().includes(this.searchingMovie)
    //   );
    //   console.log(this.searchedMovie);
    // },
    setVisibility(visibility) {
      console.log("user choose visibility is:", visibility); //測試後可刪
      this.visibility = visibility;
    }
  },
  computed: {
    filteredMovies() {
      if (!this.searchingMovie) return this.movies;
      return this.movies.filter((movie) =>
        movie.title.toLowerCase().includes(this.searchingMovie)
      );
    }
  }
});