How to add month and year filter in Vue.js component

<template>
  <!-- Month and Year Picker -->
  <div class="button-row" style="flex-direction: column; align-items: center;">
    <div class="button-container">
      <div class="date-picker-container">
        <span class="date-picker-label">Month:</span>
        <select v-model="selectedMonth" class="date-picker-input">
          <option v-for="month in months" :key="month.value" :value="month.value">
            {{ month.name }}
          </option>
        </select>
      </div>
      <div class="date-picker-container">
        <span class="date-picker-label">Year:</span>
        <select v-model="selectedYear" class="date-picker-input">
          <option v-for="year in years" :key="year" :value="year">
            {{ year }}
          </option>
        </select>
      </div>
      <div class="date-picker-container">
        <button @click="clearDateSelection" class="datebutton">Clear Selection</button>
      </div>
    </div>
    <!-- Error Message -->
    <div v-if="dateErrorMessage" class="error-message">
      {{ dateErrorMessage }}
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      months: [
        { name: "January", value: 1 },
        { name: "February", value: 2 },
        { name: "March", value: 3 },
        { name: "April", value: 4 },
        { name: "May", value: 5 },
        { name: "June", value: 6 },
        { name: "July", value: 7 },
        { name: "August", value: 8 },
        { name: "September", value: 9 },
        { name: "October", value: 10 },
        { name: "November", value: 11 },
        { name: "December", value: 12 }
      ],
      years: [],
      selectedMonth: null,
      selectedYear: null,
      dateErrorMessage: ""
    };
  },
  created() {
    this.populateYears();
  },
  methods: {
    populateYears() {
      const currentYear = new Date().getFullYear();
      for (let year = currentYear - 50; year <= currentYear; year++) {
        this.years.push(year);
      }
    },
    clearDateSelection() {
      this.selectedMonth = null;
      this.selectedYear = null;
      this.dateErrorMessage = "";
    }
  }
};
</script>


<style scoped>
.button-row {
  display: flex;
}


.button-container {
  display: flex;
}


.date-picker-container {
  margin: 5px;
}


.date-picker-label {
  margin-right: 10px;
}


.date-picker-input {
  margin-right: 10px;
}


.datebutton {
  margin-left: 10px;
}


.error-message {
  color: red;
  margin-top: 10px;
}
</style>

In the provided Vue.js template, the select elements are bound to selectedMonth and selectedYear using v-model, allowing for two-way data binding. The options for months and years are generated dynamically using v-for directives, providing a list of months and a dynamically populated list of years. A button is included to clear the date selection, which invokes the clearDateSelection method to reset the selected values. An error message is displayed conditionally based on the value of dateErrorMessage. In the script section, the data function initializes arrays for months and years, along with variables for the selected month, selected year, and an error message. The created lifecycle hook ensures the years array is populated dynamically when the component is created, using the populateYears method to fill it with the last 50 years up to the current year. The clearDateSelection method is defined to reset the selected month and year to null and clear any error message. Basic CSS styles are applied to the date picker elements and the error message to ensure a consistent and user-friendly layout.