changes

app/components/datepicker/PickYear.vue

@@ -1,65 +1,53 @@
 <template>
   <div class="columns is-mobile is-multiline mx-0">
     <span
-      v-for="(v, i) in years"
-      class="column is-4 has-text-centered is-clickable fs-14"
-      :class="i === 0 || i === 11 ? 'has-text-grey-light' : ''"
-      @click="$emit('year', v)"
-      >{{ v }}</span
+      v-for="(year, i) in years"
+      :key="year"
+      :class="['column is-4 has-text-centered is-clickable fs-14', (i === 0 || i === 11) && 'has-text-grey-light']"
+      @click="$emit('year', year)"
     >
+      {{ year }}
+    </span>
   </div>
 </template>
-<script>
-export default {
-  props: ["year", "month", "action"],
-  data() {
-    return {
-      years: [],
-    };
+<script setup>
+const props = defineProps({
+  year: Number,
+  month: Number,
+  action: Object,
+});
+
+const emit = defineEmits(["caption"]);
+const years = ref(
+  Array.from({ length: 12 })
+    .fill(props.year)
+    .map((y, i) => y + i - 6),
+);
+emit("caption", `${years.value[1]} – ${years.value[10]}`);
+
+watch(
+  () => props.action,
+  (newVal) => {
+    if (newVal.name === "next") next();
+    if (newVal.name === "previous") previous();
   },
-  created() {
-    this.years = [this.year];
-    for (let i = 1; i < 7; i++) {
-      this.years.push(this.year + i);
-      this.years.push(this.year - i);
-    }
-    this.years.sort(function (a, b) {
-      return a - b;
-    });
-    this.years = this.years.slice(0, 12);
-    this.$emit("caption", `${this.years[1]}-${this.years[10]}`);
-  },
-  watch: {
-    action: function (newVal) {
-      if (newVal.name === "next") this.next();
-      if (newVal.name === "previous") this.previous();
-    },
-  },
-  methods: {
-    next() {
-      let year = this.years[this.years.length - 1];
-      this.years = [];
-      for (let i = 0; i < 12; i++) {
-        this.years.push(year + i);
-      }
-      this.years.sort(function (a, b) {
-        return a - b;
-      });
-      this.years = this.years.slice(0, 12);
-      this.$emit("caption", `${this.years[1]}-${this.years[10]}`);
-    },
-    previous() {
-      let year = this.years[0];
-      this.years = [];
-      for (let i = 0; i < 12; i++) {
-        this.years.push(year - i);
-      }
-      this.years.sort(function (a, b) {
-        return a - b;
-      });
-      this.years = this.years.slice(0, 12);
-      this.$emit("caption", `${this.years[1]}-${this.years[10]}`);
-    },
-  },
-};
+);
+
+watch(years, () => {
+  emit("caption", `${years.value[1]} – ${years.value[10]}`);
+});
+
+function next() {
+  const baseYear = years.value[11];
+  years.value = Array.from({ length: 12 })
+    .fill(baseYear)
+    .map((y, i) => y + i - 6);
+}
+
+function previous() {
+  const baseYear = years.value[0];
+  years.value = Array.from({ length: 12 })
+    .fill(baseYear)
+    .map((y, i) => y + i - 6);
+}
 </script>