Vue 開発の使用時に動的フォームの生成と送信で発生する問題

<template>
  <div>
    <label>选择您的性别：</label>
    <select v-model="gender" @change="updateFormFields">
      <option value="male">男</option>
      <option value="female">女</option>
    </select>
    
    <div v-if="gender === 'male'">
      <label>请输入您的身高：</label>
      <input type="number" v-model="height" />
    </div>
    
    <div v-else-if="gender === 'female'">
      <label>请输入您的体重：</label>
      <input type="number" v-model="weight" />
    </div>
    
    <button @click="submitForm">提交</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      gender: '',
      height: null,
      weight: null
    }
  },
  methods: {
    updateFormFields() {
      this.height = null;
      this.weight = null;
    },
    submitForm() {
      // 提交表单的逻辑
      console.log(this.gender, this.height, this.weight);
    }
  }
}
</script>

<template>
  <div>
    <form @submit.prevent="submitForm">
      <label>用户名：</label>
      <input type="text" v-model="username" />
      
      <label>密码：</label>
      <input type="password" v-model="password" />
      
      <button type="submit">登录</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    submitForm() {
      // 发送登录请求
      axios.post('/api/login', {
        username: this.username,
        password: this.password
      })
      .then(response => {
        // 处理登录成功的逻辑
        console.log(response.data);
      })
      .catch(error => {
        // 处理登录失败的逻辑
        console.error(error);
      });
    }
  }
}
</script>