如何在Vue.js中为数组设置自定义业务字段作为键索引

1. 调整数据类型定义 #

你需要使用字符串类型的rut值作为键，而JavaScript数组仅支持数字索引，所以首先要把form.amount从数组改为普通对象：

data: function() {
    return {
        form: {
            amount: {}, // 把原来的[]修改为{}
        },
    }
}

2. 处理响应式适配 #

如果你使用Vue2 #

Vue2的响应式系统无法监听到对象新增属性的变化，你需要在拿到posts列表后，提前为所有rut键初始化响应式属性：

// 示例：请求完posts接口后执行初始化
this.posts = 接口返回的posts数据
this.posts.forEach(post => {
  // 调用$set方法添加响应式属性，默认值可设为空字符串或0
  this.$set(this.form.amount, post.rut, '')
})

之后模板里直接绑定v-model="form.amount[post.rut]"即可正常使用。

如果你使用Vue3 #

Vue3基于Proxy实现响应式，无需额外初始化操作，修改完data里的amount类型为对象后，直接修改模板的v-model绑定即可。

额外优化建议 #

你当前循环生成的input都使用了同一个固定idexampleInputEmail1，会导致DOM id重复，建议改为动态id：

<input 
  type="number" 
  class="form-control" 
  :id="'amount_' + post.rut" 
  v-model="form.amount[post.rut]" 
  placeholder="Ingresa el monto"
>

修改完成后提交数据时，form.amount的结构就会是你需要的rut为键的格式：{ '2714155': 对应值, '4578745': 对应值 }

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