Vue.js 2中如何通过模态框输入值修改输入框的name属性

核心思路 #

把每个输入框的name属性绑定到响应式数据中的自定义字段，通过模态框修改该字段，实现输入框name的动态更新。

具体实现步骤 #

1. 调整数据结构
   在你循环生成输入框的数据源中，给每个项添加customName字段，初始值可以沿用原来的自动生成名称（比如box-0-input-1）：

   data() {
     return {
       inputItems: [
         { id: 1, value: '', customName: 'box-0-input-1' },
         { id: 2, value: '', customName: 'box-0-input-2' }
         // 更多项...
       ],
       currentEditItem: null // 存储当前要修改的输入项
     }
   }
   

2. 绑定输入框的name属性
   循环渲染输入框时，将name绑定到item.customName，而非静态生成的字符串：

   <div v-for="(item, index) in inputItems" :key="item.id">
     <input 
       type="text" 
       v-model="item.value" 
       :name="item.customName" 
       @click="openModal(item)"
     >
   </div>
   

3. 模态框绑定修改逻辑
   打开模态框时传入当前要修改的项，用v-model绑定currentEditItem.customName，确认后直接更新数据即可：

   <!-- 模态框 -->
   <div v-if="currentEditItem">
     <input type="text" v-model="currentEditItem.customName">
     <button @click="closeModal">确认修改</button>
   </div>
   

   对应的方法：

   methods: {
     openModal(item) {
       this.currentEditItem = item
       // 这里添加模态框显示逻辑
     },
     closeModal() {
       this.currentEditItem = null
       // 这里添加模态框隐藏逻辑
     }
   }
   

关键说明 #

• 之前用v-model没成功，大概率是因为你把name设成了静态字符串（比如直接写name="box-{{index}}-input-{{id}}"），而非绑定到响应式数据上。Vue无法监听静态属性的变化，必须绑定到data中的响应式字段才能实时更新。
• 提交表单时，输入框的name就会是你在模态框中设置的值，比如name="John"，提交结果就会是'John'=>'输入值'。

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