How to combine each select tag’s data

I’m creating a sign-up page in vue3 now and trying to pass the value of birthDate. The date of birth consists of three select tags and each tag has a year, month, and day as an option. I want to combine the values of each select tags into birthDate. and need to deliver the value of the birthDate through ‘axios post’ toward the backend (form like (20150516)).

this is Join.vue

<template>
  <div class="signup">
    <div class="signup-container">
      <h2>회원가입</h2>
      <form @submit.prevent="submitForm">
        <div class="user-details">
          <div class="input-box">
            <span class="details">아이디</span>
            <input
              type="text"
              placeholder="아이디를 입력하세요"
              v-model="info.userId"
              name="userId"
              required />
          </div>
          <div class="input-box">
            <span class="details">비밀번호</span>
            <input
              type="password"
              placeholder="비밀번호를 입력하세요"
              v-model="info.password"
              name="password"
              required />
          </div>
          <div class="input-box">
            <span class="details">비밀번호 확인</span>
            <input
              type="password"
              placeholder="비밀번호를 확인하세요"
              v-model="info.passwordConfirm"
              name="passwordConfirm"
              required />
          </div>
          <div class="input-box">
            <span class="details">이름</span>
            <input
              type="text"
              placeholder="이름을 입력하세요"
              v-model="info.userName"
              name="userName"
              required />
          </div>
          <div class="input-box">
            <span class="details">생년월일</span>
            <select
              v-for="filter in filters"
              v-model="info.birthDate"
              :key="filter.name"
              class="form-select">
              <option
                v-for="item in filter.items"
                :key="item">
                {{ item }}
              </option>
            </select>
          </div>
          <div class="input-box">
            <span class="details">전화번호</span>
            <input
              type="text"
              placeholder="전화번호를 입력하세요"
              v-model="info.phoneNumber"
              name="phoneNumber"
              required />
          </div>
          <div class="input-box">
            <span class="details">이메일</span>
            <input
              type="email"
              placeholder="이메일을 입력하세요"
              v-model="info.email"
              name="email"
              required />
          </div>
        </div>
        <div class="button">
          <input
            type="submit"
            value="가입하기" />
        </div>
      </form>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data() {
    return {
      year: '',
      month: '',
      day: '',
      emails: '',
      filters: [
        {
          name: 'year',
          items: (() => {
            const years = []
            const thisYear = new Date().getFullYear()
            for(let i = thisYear; i >= 1960; i -= 1) {
              years.push(i)
            }
            return years
          })()
        },
        {
          name: 'month',
          items: (() => {
            const months = []
            for(let j = 1; j <= 12; j += 1 ) {
              months.push(j)
            }
            return months          
          })()
        },
        {
          name: 'day',
          items: (() => {
            const days = []
            for(let q = 1; q <= 31; q += 1) {
              days.push(q)
            }
            return days
          })()
        }
      ]
    }
  },
  methods: {
    async submitForm() {
      console.log(this.$store.state)
      this.$store.dispatch('signup/addUsers', {
        userId: this.$store.state.userId,
        password: this.$store.state.password,
        passwordConfirm: this.$store.state.passwordConfirm,
        userName: this.$store.state.userName,
        birthDate: this.$store.state.birthDate,
        phoneNumber: this.$store.state.phoneNumber,
        email: this.$store.state.email
      })
      alert('회원가입이 완료되었습니다. 새로운 환경에서 로그인 해주세요.')
      this.$store.commit('signup/resetRegistration')
      this.$router.push('/')
    }
  },
  computed: {
    ...mapState('signup',{
      info: 'Userinfo'
    })
  }
}

and this is join.js

import axios from 'axios'

export default {
  namespaced: true, 
  state: {
    Userinfo: {
      userId: '',
      password: '',
      passwordConfirm: '',
      userName: '',
      birthDate: '',
      phoneNumber: '',
      email: ''
    }
  },
  getters: {},
  mutations: {
    addUsers: (state) => {
      axios.post('http://??.???.???.???:????/api/signup', state.Userinfo)
        .then(response => {
        console.log(response)
        })
        .catch(error => {
        console.log(error)
        })
    },
    resetRegistration(state) {
      state.Userinfo = {
        userId: '',
        password: '',
        passwordConfirm: '',
        userName: '',
        birthDate: '',
        phoneNumber: '',
        email: ''
      }
    }
  },
  actions: {
      async addUsers({ commit }, payload) {
      return await commit('addUsers',payload)
    }
  }
}

Answer

You could play around with substrings to get/set the first 4 chars for year, 2 for month and 2 for days of the birthDate string.

But if it was me, I would keep the year, month and day separate in the store and combine when calling the api:

axios.post(‘http://??.???.???.???:????/api/signup’, { …state.Userinfo, birthDate: `${state.birthYear}${state.birthMonth}${state.birthDay}`, });