如何結合每個選擇標簽的資料

我現在正在vue3中創建一個注冊頁面，并試圖傳遞出生日期的值。 出生日期由三個選擇標簽組成，每個標簽都有一個年、月、日的選項。我想把每個選擇標簽的值合并成出生日期。需要通過'axios post'向后臺傳遞出生日期的值（像(20150516)這樣的表格）。

這是Join.vue

< template>
  <div class="signup">/span>
    <div class="signup-container">/span>
      <h2>/span>????</h2>
      <form @submit.prevent="submitForm">/span>
        <div class="user-details"/span>>
          <div class="input-box"> 
            <span class="details"/span>> ???</span>/span>
            <input 
              type="text"/span>
              placeholder="???? ?????" 
              v-model="info.userId"。
              name="userId"/span>
              required /> 
          </div> 
          <div class="input-box"> 
            <span class="details"/span>> ?????</span>
            <input 
              type="password" 
              placeholder="????? ?????"
              v-model="info.password"。
              name="password"/span>
              required /> 
          </div> 
          <div class="input-box"> 
            <span class="details"/span>> ??????</span>。
            <input 
              type="password" 
              placeholder="????? ?????"
              v-model="info.passwordConfirm"。
              name="passwordConfirm" 
              required />
          </div> 
          <div class="input-box"> 
            <span class="details"/span>> ??</span> 
            <input 
              type="text"/span>
              placeholder="??? ?????" 
              v-model="info.userName"。
              name="userName"/span>
              required /> 
          </div> 
          <div class="input-box"> 
            <span class="details"/span>> ????</span>/span>
            <select 
              v-for="filter in filters"/span>
              v-model="info.birthDate"。
              :key="filter.name"。
              class="form-select">>
              <option
                v-for=" item in filter.items"
                :key="item">/span>
                {{專案}}
              </option> { item }}.
            </select>/span>
          </div>/span>
          <div class="input-box"> 
            <span class="details"/span>> ????</span>>
            <input 
              type="text"/span>
              placeholder="????? ?????"
              v-model="info.phoneNumber"。
              name="phoneNumber" 
              required />
          </div> 
          <div class="input-box"> 
            <span class="details"/span>> ???</span>>
            <input 
              type="email" 
              placeholder="???? ?????" 
              v-model="info.email"。
              name="email" 
              required /> 
          </div> 
        </div>/span>
        <div class="button"> 
          <input
            type="submit" 
            value="????"/span> />
        </div>
      </form> 
    </div>/span>
  </div>/span>
</template>

<腳本>
import { mapState } from 'vuex'/span>
export default {
  data（） {
    return {
      年。''/span>,
      月。'',
      日: '',
      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('/'/span>)
    }
  },
  computed: {
    ...mapState（'signup',{
      info: 'Userinfo'。
    })
  }
}

而這是join.js

import axios from 'axios' 

export default {
  namespaced: true, 
  state: {
    Userinfo: {
      userId: ''。
      password: '',
      passwordConfirm: '',
      userName: '',
      birthDate: '',
      phoneNumber: '',
      email: '', 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: ''/span>,
        password: '',
        passwordConfirm: '',
        userName: '',
        birthDate: '',
        phoneNumber: '',
        email: '', email.
      }
    }
  },
  action: {
      async addUsers({ commit }, payload) {
      return await commit('addUsers', payload)
    }
  }
}

uj5u.com熱心網友回復：

你可以使用子字串來獲取/設定出生日期字串的前4個字符，2個字符為月，2個字符為日。

但是，如果是我，我會在商店中保持年、月、日的分離，并在呼叫api時合并：

如果是我，我會在商店中保持年、月、日的分離。

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

標籤：

上一篇：以角度向指令添加一個類

下一篇：Vuex：不寫itvuex就在頁面重繪時持久化狀態？