Vue.js中如何动态创建v-model的绑定名称？

不需要单独创建nameModel01这类独立变量，直接在组件配置对象中新增字段绑定输入值，就能轻松实现需求，同时让数据管理更简洁。

1. 更新组件配置对象结构 #

在addAddressField方法中，给每个新增的组件对象添加value属性，用来存储对应输入框的内容：

addAddressField() {
  this.AddressFieldObject.push({
    id: 'id' + this.nextAddressFieldID++,
    title: 'title' + this.nextAddressFieldTitle++,
    value: '' // 新增字段，作为输入框的绑定目标
  })
  this.newAddressField = ''
}

2. 绑定v-model到对应字段 #

修改模板中的address-field组件，将v-model直接绑定到循环项的value属性：

<ul class="p-0 m-0">
  <address-field
       v-for="(addressfield) in AddressFieldObject"
       :key="addressfield.id"
       :title="addressfield.title"
       v-model="addressfield.value"
   ></address-field>
</ul>

3. 获取所有输入数据 #

此时AddressFieldObject数组中每个对象的value就是对应输入框的内容，要得到目标格式的数组，只需提取这些值：

// 提取所有输入值到数组
const inputArray = this.AddressFieldObject.map(item => item.value)
// inputArray 格式：[输入框1的值, 输入框2的值, 输入框3的值]

为什么不推荐动态变量名？ #

Vue的响应式系统对直接新增的顶层变量兼容性差，而且维护多个独立的nameModelXX变量会让代码冗余、逻辑分散。把值和组件配置绑定在一起，既符合Vue响应式规则，又能让组件与数据一一对应，后期维护更方便。

内容的提问来源于stack exchange，提问作者João Denari