Vue.js中如何为text类型Input预填充值？含MongoDB更新场景

在Vue里实现输入框预填充，核心是利用双向数据绑定，把从MongoDB查询到的待修改数据赋值给表单的响应式变量即可，以下分Vue 2和Vue 3两种场景说明：

一、Vue 2 实现方式 #

1. 定义表单响应式数据
   在组件的data选项里声明表单数据对象，对应你要修改的MongoDB文档字段：

export default {
  data() {
    return {
      formData: {
        username: '',
        email: ''
        // 其他需要修改的字段
      }
    }
  },
  methods: {
    // 从后端获取MongoDB中待修改的数据
    async fetchEditData() {
      // 假设通过API请求获取目标文档，比如根据ID查询
      const res = await this.$http.get('/api/user/123')
      // 将后端返回的数据赋值给formData，实现预填充
      this.formData = res.data
    }
  },
  mounted() {
    // 组件挂载时自动获取数据并预填充
    this.fetchEditData()
  }
}

2. 绑定到Input输入框
   在模板里用v-model绑定对应的字段：

<input type="text" v-model="formData.username" placeholder="用户名">
<input type="text" v-model="formData.email" placeholder="邮箱">

二、Vue 3 实现方式（Composition API/setup语法糖） #

1. 定义响应式表单数据
   用reactive定义表单对象，或者用ref单独定义每个字段：

<script setup>
import { reactive, onMounted } from 'vue'
import axios from 'axios'

// 声明响应式表单数据
const formData = reactive({
  username: '',
  email: ''
})

// 获取待修改的MongoDB数据
async function fetchEditData() {
  const res = await axios.get('/api/user/123')
  // 赋值实现预填充
  Object.assign(formData, res.data)
}

// 组件挂载时执行数据获取
onMounted(() => {
  fetchEditData()
})
</script>

2. 绑定到Input输入框
   模板写法和Vue 2一致：

<input type="text" v-model="formData.username" placeholder="用户名">
<input type="text" v-model="formData.email" placeholder="邮箱">

注意事项 #

• 如果后端返回的字段和表单字段不一致，需要手动映射赋值，比如this.formData.username = res.data.user_name
• 若需要处理数据格式转换（比如日期、数字），在赋值前先做处理再绑定到表单变量
• 提交表单时，直接把formData传给后端接口，由后端完成MongoDB的更新操作

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