【Vuetify】`v-select`로 임의의 범위의 숫자를 선택할 수 있는 셀렉트 박스 샘플 코드

소개



Vuetify v-select를 사용하여 1-116 세의 나이를 선택할 수있는 샘플 코드를 만들었습니다.

환경


OS: macOS Catalina 10.15.1
Vue: 2.6.10
vue-cli: 4.1.1
vuetify: 2.1.0

출력







코드



sample.vue
<template>
  <v-select
    v-model="age"
    :items="items"
    label="年齢"
  ></v-select>
</template>

<script>
  const maxAge = 117; //表示したい数字より+1で設定。
  const ageRange = [...Array(maxAge).keys()]

  export default {
    data() {
      return {
        items: ageRange,
          age: '',
        },
      }
    },
  }
</script>

과연[1,2,3,4,...117]하고 싶지 않았기 때문에 방법을 조사하면,[...Array(数字).keys()] 로 정수의 일련번호를 작성할 수 있네요. 공부가 되었습니다.

Ruby라면 범위 객체로 0..100로 OK이지만 한 번 번거 로 네요

결론



끝까지 읽어 주셔서 감사합니다

누군가의 도움이 되길 바랍니다

참고로 한 사이트 (항상 감사합니다)


  • 일련 번호의 배열 만들기(es2015 ver) - Qiita
  • 좋은 웹페이지 즐겨찾기