-
Vue 프로젝트 Search - 필터프로젝트/영화 검색 (Vue) 2021. 8. 1. 13:50
Vue 프로젝트 Search - 필터
Vue 프로젝트 Search - 필터 순서
1. /src/components/Search.vue 생성
<!-- Search.vue --> <template> <div class="container"> <input v-model="title" class="form-control" type="text" placeholder="Search for Movies, Series & more" /> <div class="selects"> <select v-for="filter in filters" v-model="$data[filter.name]" :key="filter.name" class="form-select"> <option v-if="filter.name === 'year'" value=""> All Years </option> <option v-for="item in filter.items" :key="item"> {{ item }} </option> </select> </div> </div> </template>
<script> export default { data() { return { title: '', type: 'movie', number: 10, year: '', filters: [ { name: 'type', items: ['movie', 'series', 'episode'] }, { name: 'number', items: [10, 20, 30] }, { name: 'year', items: (() => { const years = [] const thisYear = new Date().getFullYear() // 올해의 년도 반환 for (let i = thisYear; i >= 1985; i -= 1) { years.push(i) } return years })() } ] } } } </script>
<style lang="scss" scoped> .container { display: flex; > * { margin-right: 10px; font-size: 15px; &:last-child { margin-right: 0; } } .selects { display: flex; select { width: 120px; margin-right: 10px; &:last-child { margin-right: 0; } } } } </style>
2. /src/routes/Home.vue 연결
<!-- Home.vue --> <template> <Headline /> <Search /> </template>
<script> import Headline from '~/components/Headline' import Search from '~/components/Search' export default { components: { Headline, Search } } </script>
결과
참고
https://getbootstrap.com/docs/5.0/forms/form-control/
Form controls
Give textual form controls like
s and
https://getbootstrap.com/docs/5.0/forms/select/
Select
Customize the native
'프로젝트 > 영화 검색 (Vue)' 카테고리의 다른 글
Vue 프로젝트 Vuex(Store) 개요 (0) 2021.08.01 Vue 프로젝트 Search - 버튼 (0) 2021.08.01 Vue 프로젝트 Headline (0) 2021.07.31 Vue 프로젝트 Header - Logo 및 Google Fonts (0) 2021.07.31 Vue 프로젝트 Header - Nav (0) 2021.07.29