Vue2动态input name绑定问题：需生成people[0]['name']格式属性值

我明白你现在的需求：循环people数组生成input，每个input的name属性要格式化为people[0]['name']、people[1]['name']这种，之前用:name="someFunction"没生效对吧？其实不用额外写函数，直接在模板里用字符串拼接就能搞定，当然函数写法也能实现，我给你两种方案：

方案1：直接在模板中拼接字符串（最简洁） #

利用Vue模板的表达式能力，结合ES6模板字符串直接生成需要的name格式，代码示例如下：

<template>
  <div>
    <!-- 循环people数组，拿到每个项的索引index -->
    <div v-for="(person, index) in people" :key="index">
      <input 
        type="text"
        <!-- 用模板字符串拼接出目标name格式 -->
        :name="`people[${index}]['name']`"
        v-model="person.name"
        placeholder="输入姓名"
      >
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      people: [
        { name: '' },
        { name: '' },
        // 可以根据需求动态添加更多项
      ]
    }
  }
}
</script>

渲染后每个input的name属性就会是people[0]['name']、people[1]['name']这种格式，完全符合你的要求。

方案2：使用方法函数生成name（如果你偏好函数式写法） #

如果之前用函数没生效，大概率是没正确传递索引参数或者字符串拼接有误。正确的函数写法应该是这样的：

<template>
  <div>
    <div v-for="(person, index) in people" :key="index">
      <input 
        type="text"
        <!-- 调用方法并传入当前索引index -->
        :name="getInputName(index)"
        v-model="person.name"
        placeholder="输入姓名"
      >
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      people: [
        { name: '' },
        { name: '' }
      ]
    }
  },
  methods: {
    getInputName(index) {
      // 返回拼接好的name字符串
      return `people[${index}]['name']`
    }
  }
}
</script>

这样调用函数时传入index，就能生成正确的name属性值了。

小提示 #

• 尽量给v-for的循环项绑定唯一的:key，如果你的person对象有唯一ID（比如person.id），优先用ID作为key，比index更稳定；
• 这种name格式在表单提交时，后端框架（比如PHP、Laravel等）通常能自动解析为数组结构，方便你获取批量数据。

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