如何在Vue3/Nuxt3中实现表单动态增删输入字段？

核心思路是用数组存储每个输入字段的独立数据，每个数组元素是包含唯一标识和输入值的对象，确保v-for循环时每个输入框绑定独立的响应式数据，避免值同步问题。

实现步骤 #

1. 定义响应式数据
   在<script setup>中用ref创建数组，初始包含3个带唯一标识的字段对象：

   <script setup>
   import { ref } from 'vue'
   
   // 初始3个输入字段，id做唯一标识，value存输入值
   const places = ref([
     { id: 1, value: '' },
     { id: 2, value: '' },
     { id: 3, value: '' }
   ])
   
   // 新增字段
   const addField = () => {
     const newId = places.value.length + 1
     places.value.push({ id: newId, value: '' })
   }
   
   // 删除指定字段
   const removeField = (id) => {
     places.value = places.value.filter(place => place.id !== id)
   }
   
   // 表单提交逻辑
   const handleSubmit = () => {
     console.log('提交的字段值:', places.value.map(p => p.value))
     // 这里可以对接后端接口或其他处理
   }
   </script>
   

2. 编写模板结构
   用v-for循环渲染字段，绑定v-model到每个对象的value，并设置唯一key：

   <template>
     <form @submit.prevent="handleSubmit" class="form-wrap">
       <!-- 动态输入字段 -->
       <div v-for="place in places" :key="place.id" class="field-row">
         <label>Place{{ place.id }}</label>
         <input 
           type="text" 
           v-model="place.value" 
           placeholder="输入内容"
           class="input-box"
         >
         <button 
           type="button" 
           @click="removeField(place.id)"
           class="remove-btn"
         >
           移除
         </button>
       </div>
   
       <!-- 新增按钮 -->
       <button type="button" @click="addField" class="add-btn">
         ADD
       </button>
   
       <!-- 提交按钮 -->
       <button type="submit" class="submit-btn">
         提交表单
       </button>
     </form>
   </template>
   

3. 可选样式优化
   简单添加CSS让布局更规整：

   <style scoped>
   .form-wrap {
     max-width: 500px;
     margin: 2rem auto;
     padding: 1.5rem;
     border: 1px solid #eee;
     border-radius: 8px;
   }
   
   .field-row {
     display: flex;
     gap: 0.6rem;
     margin-bottom: 1rem;
     align-items: center;
   }
   
   .input-box {
     flex: 1;
     padding: 0.5rem;
     border: 1px solid #ddd;
     border-radius: 4px;
   }
   
   .remove-btn, .add-btn, .submit-btn {
     padding: 0.5rem 1.2rem;
     border: none;
     border-radius: 4px;
     cursor: pointer;
     color: white;
   }
   
   .remove-btn {
     background-color: #ff4444;
   }
   
   .add-btn {
     background-color: #33b5e5;
     margin-bottom: 1rem;
   }
   
   .submit-btn {
     background-color: #00C851;
   }
   </style>
   

问题原因说明 #

如果之前直接用数组存储简单值（比如const places = ref(['', '', ''])），所有输入框会共享同一个响应式引用，导致修改一个时其他值同步变化。用对象数组的方式，每个输入框绑定独立对象的value属性，自然不会互相干扰。

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