Vue中v-for循环下绑定输入值为适配MongoDB模型的对象

嘿，我来帮你搞定这个绑定问题！你现在的核心问题是输入框没有正确绑定到对应行的set.resistance属性，导致编辑后的数据没法对应到原有数据模型。咱们一步步来修正：

1. 修正输入框的v-model绑定 #

你当前的代码里，输入框绑定的是整个exercises数组，这显然不对——每个输入框应该对应到当前行当前组的阻力值。把模板里的input部分改成这样：

<input v-else type="text" :placeholder="set.resistance" v-model="set.resistance">

这样一来，每个输入框的内容会直接同步到exercise.sets[set_index].resistance，完全贴合你MongoDB里的文档结构。

2. 适配动态组数（解决仅支持4组的问题） #

你提到动态生成列有问题，咱们可以把表头和表格内容都改成动态生成的，同时确保每个训练项的sets数组长度足够：

动态生成表头 #

把固定的Set 1-4改成循环生成：

<tr>
  <th>Exercise</th>
  <th v-for="(n, index) in maxSets" :key="index">Set {{n}}</th>
</tr>

然后在组件里定义一个计算属性maxSets，用来控制显示的组数（可以固定为4，也可以动态取现有记录的最大组数）：

computed: {
  maxSets() {
    // 固定4组直接return 4；动态取最大值用下面的代码
    // return Math.max(...this.exercises.map(ex => ex.sets.length), 4);
    return 4;
  },
  // 你的其他计算属性...
}

补全训练项的sets数组 #

在进入编辑模式时，把每个训练项的sets补全到指定组数，避免空列无法编辑：

methods: {
  enableEditMode() {
    this.edit = true;
    // 补全sets数组到4组
    this.exercises = this.exercises.map(exercise => {
      const filledSets = [...exercise.sets];
      while (filledSets.length < this.maxSets) {
        filledSets.push({ resistance: '' });
      }
      return { ...exercise, sets: filledSets };
    });
  },
  // ...其他方法
}

3. 完善Vuex双向绑定 #

你的计算属性exercises的set方法是空的，需要把修改后的数据同步到Vuex Store：

exercises: {
  get: function() { return store.state.exercises },
  set: function(updatedExercises) {
    // 调用Vuex的mutation更新状态
    store.commit('UPDATE_EXERCISES', updatedExercises);
  }
},

记得在Vuex的store里定义对应的mutation：

mutations: {
  UPDATE_EXERCISES(state, payload) {
    state.exercises = payload;
  }
}

4. 保存时发送请求 #

现在，当你点击Save按钮时，this.exercises已经是更新后的完整数据了，直接用它来发送HTTP请求即可：

methods: {
  saveAndExit() {
    // 发送请求到后端，示例用axios
    axios.post('/api/update-workout', this.exercises)
      .then(response => {
        console.log('保存成功！');
        this.edit = false;
      })
      .catch(error => {
        console.error('保存失败', error);
      });
  },
  // ...其他方法
}

这样修改后，每个输入框的内容都会准确绑定到对应训练项的对应组，完全适配你现有的MongoDB数据模型，后续保存也能直接用更新后的数据啦！

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