Vue JS v-for循环表单取值及下拉联动问题解决方案

你遇到的两个问题本质是同一类逻辑错误导致的：

• 所有行的下拉选择框、复选框都绑定了全局级别的同一个响应式变量（selectedProjectOption、selectMap），所有行共享状态，自然会出现改一个全同步的问题
• 行渲染数据和下拉选项源混用了同一个数组，且没有按行存储独立的表单值，无法直接收集结构化数据

1. 调整模板绑定逻辑 #

把所有表单控件的v-model绑定到当前循环行的自有属性上，拆分下拉选项源和行渲染数据，移除和v-model冲突的静态checked属性：

<b-form>    
    <table class="table">
        <thead>
            <tr>
                <th>Import Field</th>
                <th>Project Field</th>
                <th>Select</th>
            </tr>
        </thead>
        <tbody>
            <tr
                v-for="(row, index) in formRows"
                :key="index"
            >
                <td>
                    <b-form-input
                        class="basicInput"
                        v-model="row.importField"
                    />
                </td>
                <td>
                    <b-form-select
                        v-model="row.projectField"
                        :options="projectFieldSelectOptions"
                    />
                </td>
                <td>
                    <b-form-checkbox
                        v-model="row.isSelected"
                        name="check-button"
                        switch
                        inline
                    >
                    </b-form-checkbox>
                </td>
            </tr>
        </tbody>
    </table>
    <b-button
        variant="primary"
        type="submit"
        @click.prevent="validateEditMapping"
    >
        Next
    </b-button>
</b-form>

2. 初始化响应式数据 #

在Vue组件的data中拆分两类数据，初始化每行的独立表单状态：

data() {
  return {
    // 下拉选择的选项源，所有行共用的可选项目字段列表
    projectFieldSelectOptions: [
      // 按实际业务填充选项，示例格式：{ value: 'item', text: 'item' }
    ],
    // 表单行数据，每一项对应一行的三个字段值，可根据导入的字段动态生成初始值
    formRows: [
      // 初始行示例：{ importField: 'item', projectField: '', isSelected: false }
    ]
  }
}

3. 提交时收集结构化数据 #

在提交方法中直接遍历行数据，组装为你需要的格式即可，不需要操作DOM抓取值：

methods: {
  validateEditMapping() {
    // 直接映射得到目标格式数组
    const formResult = this.formRows.map(row => ({
      importField: row.importField,
      projectField: row.projectField,
      selected: row.isSelected ? 1 : 0
    }))

    // 后续可在这里做字段校验、调用接口提交等操作
    console.log('收集到的表单数据：', formResult)
  }
}

• 每行的输入框、下拉选择、复选框状态完全独立，修改任意一行的控件不会影响其他行
• 提交时直接拿到标准结构化数组，字段顺序、值格式和预期完全匹配，不需要额外做数据清洗

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