한 번에 끝내는 프론트엔드 개발 초격차 패키지 Online를 들으며 정리한 내용입니다.

Search - 필터

1. Search.vue

src>Search.vue파일을 생성 한 후 아래와 같이 v-model디렉티브를 이용해 양방향바인딩이 가능하도록 만들어줍니다.

<template>
  <div class="contianer">
    <input
      v-model="title"
      type="text"
      placeholder="Search for Movies, Series & more" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: ''
    }
  }
}
</script>

2. Home.vue

Search.vue 파일이 출력될 수 있도록 설정해줍니다.

<template>
  <Headline />
  <Search />
</template>

<script>
import Headline from '~/components/Headline'
import Search from '~/components/Search'
export default {
  components : {
    Headline,
    Search
  }
}
</script>

3. bootstrap-Form controls

bootstrap-Form controls

아래 사진과 같이 class="form-control"을 적용하면 부트스트랩에서 제공하는 기본적인 UI를 만들어낼 수 있습니다.

<template>
  <div class="container">
    <input
      v-model="title"
      class="form-control"
      type="text" 
      placeholder="Search for Movies, Series & more" />
  </div>
</template>

4. select menu 구성

부트스트랩 select

아래와 같이 type, number, year이라는 데이터를 만든 후 filters라는 데이터를 만들어줍니다. filters를 기반으로 해서 각각의 옵션들을 vue.js의 v-for디렉티브를 이용해 한번에 제어를 할 예정입니다.

<script>
export default {
  data() {
    return {
      title: '',
      type: 'movie',
      number: 10,
      year: '',
      filters: [
        {
          name: '',
          items: []
        }
      ]
    }
  }
}
</script>

전체코드

<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"
        :key="filter.name"
        v-model="$data[filter.name]"
        class="form-select">
        <option></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--){
              years.push(i)
            }
            return years
          })()
        }
      ]
    }
  }
}
</script>

5. 수평구조만들기

<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>

6. option내용채우기

<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"
        :key="filter.name"
        v-model="$data[filter.name]"
        class="form-select">
        <option
          v-for="item in filter.items"
          :key="item">
          {{ item }}
        </option>
      </select>
    </div>
  </div>
</template>

7. 년도옵션 설정

<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"
        :key="filter.name"
        v-model="$data[filter.name]"
        class="form-select">
        <option value="">
          All Years
        </option>
        <option
          v-for="item in filter.items"
          :key="item">
          {{ item }}
        </option>
      </select>
    </div>
  </div>
</template>

이는 select태그를 반복 출력하고 있어 발생하는 문제입니다.

8. 문제해결

       <option
         v-if="filter.name==='year'"
         value="">
         All Years
       </option>