[영화 검색 사이트] Search 영역, 필터, 버튼

https://getbootstrap.com/docs/5.3/forms/form-control/

Form controls

 

https://getbootstrap.com/docs/5.3/forms/select/

Select

 

Search.vue

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

    <div class="selects">
      <select
        v-for="filter in filters"
        :key="filter.name"
        v-model="$data[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>
    <button
      class="btn btn-primary"
      @click="apply">
      Apply
    </button>
  </div>  
</template>

  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
            })()
          },
        ]
      }
    }

<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;
        }
      }
    }
    .btn {
      width: 120px;
      height: 50px;
      font-weight: 700;
      flex-shrink: 0;
    }
  }
</style>