Vue.js2中v-for遍历对象数组时Model绑定失效问题

我之前也踩过类似的嵌套数组绑定坑，大概率是Vue响应式机制的细节没处理到位，咱们一步步来排查修复：

核心问题分析 #

你遇到的v-model绑定失效，最常见的原因有两个：

1. selected_conditions未被初始化为响应式属性：Vue无法自动检测对象上新增的属性，如果你的chosen_feature是后续动态添加的，或者初始化时没声明selected_conditions数组，Vue就没法跟踪它的变化。
2. v-for缺少唯一key：Vue依赖key来精准复用DOM节点，没有key的话可能导致视图更新不及时，看起来像是绑定失效。

具体修复步骤 #

1. 确保selected_conditions是响应式的 #

初始化selected_category或者动态添加chosen_feature时，必须显式声明selected_conditions为数组：

// 初始化示例
this.selected_category = {
  chosen_features: [
    {
      label: "示例特征",
      conditions: [{ value: "1", label: "条件1" }, { value: "2", label: "条件2" }],
      selected_conditions: [] // 必须初始化空数组，确保响应式
    }
  ]
};

如果是从后端获取数据后补全属性，不能直接赋值，要用this.$set来添加响应式属性：

// 假设后端返回的chosen_features没有selected_conditions
this.selected_category.chosen_features.forEach((feature, index) => {
  this.$set(this.selected_category.chosen_features[index], "selected_conditions", []);
});

2. 给v-for添加唯一key #

给外层的v-for加上key（优先用每个feature的唯一ID，没有的话用索引兜底）：

<div v-for="(chosen_feature, index) in selected_category.chosen_features" :key="index">

3. 修正模板代码（补全并优化） #

把你的模板补全并调整细节，比如multiple可以简写，option也加上唯一key：

<div v-for="(chosen_feature, index) in selected_category.chosen_features" :key="index">
  <div class="col-md-3">
    <div class="card card-default">
      <div class="card-header">
        {{ chosen_feature.label }}
      </div>
      <div class="card-block">
        <div class="col-md-9">
          <select v-model="chosen_feature.selected_conditions" multiple>
            <option 
              v-for="condition in chosen_feature.conditions" 
              :key="condition.value" 
              :value="condition.value">
              {{ condition.label }}
            </option>
          </select>
        </div>
      </div>
    </div>
  </div>
</div>

额外注意事项 #

• 如果你需要手动修改selected_conditions，避免直接替换整个数组（比如chosen_feature.selected_conditions = [1,2]），尽量用数组方法（push/splice等），或者修改后手动触发Vue的响应式更新。
• 如果condition.value是对象类型，多选框的选中判断会有问题，建议用字符串/数字作为value值。

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