Vue.js中如何通过循环表单生成指定格式的对象数组？

核心思路 #

先基于现有语言列表和FAQ字段配置，预先生成符合目标格式的空值数组，之后渲染输入框时直接绑定数组对应项的value属性，输入内容会自动同步到数组中。

具体实现步骤 #

1. 初始化目标数组

在Vue实例的created钩子中，遍历语言列表和FAQ字段，生成初始结构的数组：

new Vue({
  el: '#app',
  data() {
    return {
      faqConfig: {
        type: 'Faq',
        fields: ['question', 'answer']
      },
      languages: [
        { id: '1', name: 'Español' },
        { id: '2', name: 'English' },
        { id: '3', name: 'Francés' }
      ],
      targetArray: [] // 存储最终结果的数组
    }
  },
  created() {
    // 生成初始结构的数组
    this.languages.forEach(lang => {
      this.faqConfig.fields.forEach(field => {
        this.targetArray.push({
          value: '',
          field: field,
          language: { ...lang } // 拷贝语言对象，避免引用关联问题
        })
      })
    })
  }
})

2. 渲染输入框并绑定数据

在模板中通过嵌套v-for渲染输入框，同时通过语言ID和字段名匹配targetArray中的对应项，用v-model绑定value：

<div id="app">
  <div v-for="lang in languages" :key="lang.id" class="language-block">
    <h3>{{ lang.name }}</h3>
    <div v-for="field in faqConfig.fields" :key="field" class="field-block">
      <label>{{ field }}:</label>
      <input 
        type="text"
        v-model="getMatchedItem(lang.id, field).value"
        placeholder="输入内容"
      >
    </div>
  </div>

  <!-- 可选：添加按钮查看当前数组结构 -->
  <button @click="showResult">查看结果</button>
</div>

在Vue实例中添加方法，快速定位对应语言和字段的数组项：

methods: {
  getMatchedItem(langId, field) {
    return this.targetArray.find(item => 
      item.language.id === langId && item.field === field
    )
  },
  showResult() {
    console.log(JSON.stringify(this.targetArray, null, 2))
  }
}

效果验证 #

在输入框中输入内容后，点击「查看结果」按钮，控制台会输出符合要求的结构化数组，所有输入值都会同步更新到对应项的value字段中。

关键细节 #

• 初始化数组时用{ ...lang }拷贝语言对象，避免后续修改源语言数据时影响目标数组
• getMatchedItem方法通过find快速定位对应项，保证v-model绑定的准确性
• 嵌套v-for的key使用语言ID和字段名，确保DOM更新的高效性

内容的提问来源于stack exchange，提问作者JesúsDel