Vue.js中如何处理表单列表并实现嵌套对象ref绑定？

问题根源 #

你代码里的:set="forms[item.id]={}"是错误写法：Vue 没有:set这个指令，而且每次组件渲染时，这行代码都会把forms[item.id]重置为空对象，导致输入框绑定的对象被频繁清空，自然无法保存输入内容。

正确实现方式 #

方式1：提前初始化表单对象 #

在获取到list数据后，先给forms初始化每个表单对应的嵌套对象，确保v-model绑定的对象存在：

import { reactive, onMounted } from 'vue'

const list = reactive([/* 你的列表数据，比如[{id:1}, {id:2}] */])
const forms = reactive({})

onMounted(() => {
  // 初始化每个表单的空对象
  list.forEach(item => {
    if (!forms[item.id]) {
      forms[item.id] = { name: '', email: '', phone: '' }
    }
  })
})

模板部分去掉错误的:set，直接绑定即可：

<form v-for="item in list" :key="item.id">
  <input v-model="forms[item.id].name" />
  <input v-model="forms[item.id].email" />
  <input v-model="forms[item.id].phone" />
</form>

方式2：模板中动态初始化（适合列表动态变化的场景） #

如果list是动态加载或变化的，可以在模板里通过判断确保对象存在，避免直接赋值导致的渲染重置：

<form v-for="item in list" :key="item.id">
  <!-- 先确保当前id对应的表单对象存在 -->
  <template v-if="!forms[item.id]">
    {{ forms[item.id] = { name: '', email: '', phone: '' } }}
  </template>
  <input v-model="forms[item.id].name" />
  <input v-model="forms[item.id].email" />
  <input v-model="forms[item.id].phone" />
</form>

注意：这里的<template>里的赋值只是为了初始化，不会渲染任何内容，也可以通过计算属性或者方法来封装这个初始化逻辑，让模板更干净。

关键注意点 #

• 必须给v-for加上:key="item.id"，确保每个表单的渲染稳定性。
• 不要在模板中直接修改响应式对象的结构（比如直接赋值forms[item.id]={}），应该在脚本逻辑中处理，或者用安全的判断方式初始化。

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