<https://getbootstrap.com/docs/5.1/forms/form-control/>

bootstrap의 Forms 의 Form control 페이지로 가서 확인.

class="form-control" 을 추가 해 줌으로써 활용 가능하다.

<https://getbootstrap.com/docs/5.1/forms/select/>

bootstrap 의 input 스타일의 select

class="form-select" 를 추가 해 줌으로써 활용 가능하다.

<select> tag 와 <option> tag 로 bootstrap 의 select bar 를 만든다.

option 에서 년도를 주르르륵 보여주고 있다. default 로 All Years로 두고 싶다면?

년도를 출력하는 option 을 보면 value 속성이 없다. value 가 없으면 content 자체가
value 가 된다.
<option 
	v-for="item in filter.items"
	:key="item">
	{{ item }}
</option>

value 속성을 가지는 option tag 를 새로 추가 해 줬다. 값은 빈 문자 데이터이고 All Years 라는
content 를 삽입했다. 그치만 이건 data 가 아닌 그냥 화면에 보여지는 이름일 뿐이다.

<option value="">
	All Years
</option>

data() 를 보면 year: '', 라고 되어있다. 아무것도 선택 되지 않았기 때문에
All Years 가 선택되어 졌다고 보는 것이다.

// Search.vue
<template>
  <div class="container">
    <input
      v-model="title"
      class="form-control"
      type="text" 
      placeholder="Search for Moviesm 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--){
              years.push(i)
            }
            return years
          })()
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  > * {
    margin-right: 10px;
    &:last-child {
      margin-right: 0;
    }
  }
  .selects {
    display: flex;
    select {
      width: 120px;
      margin-right: 10px;
      &:last-child {
        margin-right: 0;
      }
    }
  }
}
</style>