Vue使用Axios调用API提交表单无法获取用户ID及表单数据问题咨询

核心问题点 #

• 表单双向绑定错误：所有输入控件使用了单向绑定v-bind，仅能将数据渲染到视图，无法将用户输入的内容回写到formdata对象中，导致提交时表单数据全为空。同时email输入框额外写了错误的v-model="formData"，你定义的表单变量是小写的formdata，且直接绑定整个对象也不符合语法要求。
• 提交时ID参数不存在：表单提交事件中传入的id未在模板可访问的响应式变量中定义，你在data函数内声明的userId是局部变量，没有return到响应式数据中，模板无法直接读取。
• 生命周期逻辑错误：你在data初始化函数中直接调用了editUserDetails提交方法，页面刚加载、用户还未输入任何内容时就会触发一次空数据提交，完全不符合业务逻辑。获取用户详情的接口调用也不应该放在data函数中，应该放到组件生命周期钩子中执行。
• 模板语法错误：占位符使用了[[userDetails.xxx]]的错误插值语法，Vue标准属性绑定时不需要额外加该类包裹符号。

修复步骤 #

1. 修正JS逻辑：将接口调用移到created生命周期，把userId存入响应式数据，删除data中错误的提前提交调用

import axios from "axios";
export default {
  name: "Edit",
  data() {
    return {
      userId: this.$route.params.id,
      userDetails: {},
      formdata: {
        name: '',
        occupation: '',
        email: '',
        bio: '',
      },
    };
  },
  created() {
    // 仅在组件初始化时调用获取用户详情接口，不要提前调用提交
    this.getUserDetails(this.userId);
  },
  methods: {
    getUserDetails(id) {
      console.log(id);
      axios
        .get(`https://607e868602a23c0017e8b79e.mockapi.io/api/v1/users/${id}`)
        .then((response) => {
          this.userDetails = response.data;
          // 可选：拿到用户信息后直接赋值给formdata，避免用户需要全量重填
          this.formdata = {...response.data}
        })
        .catch((error) => {
          console.log(error);
        });
    },
    editUserDetails(id) {
      console.log(this.formdata);
      console.log(id);
      axios
        .patch(`https://607e868602a23c0017e8b79e.mockapi.io/api/v1/users/${id}`, this.formdata)
        .then((response) => {
          console.log(this.formdata);
          console.log(response);
        })
        .catch((error) => {          
          console.log(this.formdata);
          console.log(error);
        });
    },
  },
};

2. 修正表单模板：替换所有v-bind为v-model，修正占位符语法，传入正确的提交ID

<form @submit.prevent="editUserDetails(userId)">
  <div class="container">
    <div class="row">
      <div class="label col-2"><label for="">ID: </label></div>
      <div class="text col-8">
        <span>{{ userDetails.id }}</span>
      </div>
    </div>
    <div class="row">
      <div class="label col-2"><label for="name">Name: </label></div>
      <div class="datas col-8">
        <input
          class="input"
          id="name"
          type="text"
          v-model="formdata.name"
          :placeholder="userDetails.name"
        />
      </div>
    </div>
    <div class="row">
      <div class="label col-2">
        <label for="occupation">Occupation: </label>
      </div>

      <div class="datas col-8">
        <input
          class="input"
          id="occupation"
          type="text"
          v-model="formdata.occupation"
          :placeholder="userDetails.occupation"
        />
      </div>
    </div>
    <div class="row">
      <div class="label col-2"><label for="email">Email: </label></div>

      <div class="datas col-8">
        <input
          class="input"
          id="email"
          type="text"
          v-model="formdata.email"
          :placeholder="userDetails.email"
        />
      </div>
    </div>
    <div class="row">
      <div class="label col-2"><label for="bio">Bio: </label></div>

      <div class="datas col-8">
        <textarea
          class="input"
          name=""
          id="bio"
          cols="60"
          rows="4"
          v-model="formdata.bio"
          :placeholder="userDetails.bio"
        ></textarea>
      </div>
    </div>
  </div>
  <button>Submit</button>
</form>

内容的提问来源于stack exchange，提问作者Kevnlan