vue实现修改信息页面

Vue 实现修改信息页面

数据绑定与表单结构

使用 v-model 实现表单数据的双向绑定，确保表单字段与 Vue 实例中的数据属性同步。例如：

<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="formData.name" placeholder="姓名" />
    <input v-model="formData.email" placeholder="邮箱" />
    <button type="submit">保存</button>
  </form>
</template>

初始化表单数据

在 data 或 setup 中定义表单的初始数据，可通过接口获取原始信息填充：

data() {
  return {
    formData: {
      name: '',
      email: ''
    }
  }
}

加载原始数据

在 created 或 mounted 生命周期中调用接口获取原始数据：

async mounted() {
  const res = await axios.get('/api/user-info');
  this.formData = res.data;
}

表单提交逻辑

定义提交方法，验证数据后调用更新接口：

methods: {
  async handleSubmit() {
    try {
      await axios.put('/api/update-info', this.formData);
      alert('修改成功');
    } catch (error) {
      console.error(error);
    }
  }
}

表单验证

使用 Vuelidate 或手动验证确保数据合法性：

import { required, email } from 'vuelidate/lib/validators';

validations: {
  formData: {
    name: { required },
    email: { required, email }
  }
}

反馈与跳转

操作成功后提供反馈并跳转页面：

async handleSubmit() {
  if (this.$v.$invalid) return;
  await axios.put('/api/update-info', this.formData);
  this.$router.push('/profile'); // 跳转到个人主页
}

完整组件示例

<template>
  <form @submit.prevent="handleSubmit">
    <input v-model="formData.name" placeholder="姓名" />
    <span v-if="$v.formData.name.$error">姓名必填</span>

    <input v-model="formData.email" placeholder="邮箱" />
    <span v-if="$v.formData.email.$error">邮箱格式错误</span>

    <button type="submit">保存</button>
  </form>
</template>

<script>
import { required, email } from 'vuelidate/lib/validators';

export default {
  data() {
    return {
      formData: { name: '', email: '' }
    }
  },
  validations: {
    formData: {
      name: { required },
      email: { required, email }
    }
  },
  async mounted() {
    const res = await axios.get('/api/user-info');
    this.formData = res.data;
  },
  methods: {
    async handleSubmit() {
      this.$v.$touch();
      if (this.$v.$invalid) return;

      await axios.put('/api/update-info', this.formData);
      this.$router.push('/profile');
    }
  }
}
</script>