如何合并每个 select 标签的数据

Question

我现在正在 vue3 中创建一个注册页面并尝试传递 birthDate 的值。出生日期由三个 select 标签组成，每个标签都有年月日选项。我想将每个 select 标签的值合并到 birthDate 中。并且需要通过 'axios post' 向后端传递 birthDate 的值（形式如 (20150516)）。

这是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'
    })
  }
}

这是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 1

您可以使用子字符串 get/set birthDate 字符串的前 4 个字符代表年份，2 个字符代表月份，2 个字符代表天数。

但如果是我，我会在存储中将年、月和日分开，并在调用 api 时合并：

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

如何合并每个 select 标签的数据

How to combine each select tag's data

javascript

data-binding

vue.js

vue-component

vuex