如何实现下拉列表组：预选currentOps对象，可选jsonOperations全量操作

问题分析 #

当前代码无法预选中currentOps对应项的核心原因是对象引用不匹配：currentOps中的对象和jsonOperations中的对应对象可能是不同的引用实例，下拉框的v-model无法识别为同一个值，导致无法自动匹配选中。另外，代码中v-for的:key="currentOp"存在渲染风险，建议改为唯一标识（如id）或索引。

解决方案 #

方法一：通过唯一标识（如id）绑定匹配（推荐） #

这种方法规避了对象引用的问题，更稳定可靠：

1. 将v-model绑定为对象的唯一标识（比如id）
2. 为下拉选项设置:value="jsonOperation.id"
3. 初始化时将currentOps转换为对应对象的id数组

修改后的代码：

<template>
  <div>
    <tbody>
      <!-- 用id作为key，避免对象key导致的渲染异常 -->
      <tr v-for="(currentOpId, index) in currentOpsIds" :key="currentOpId">
        <td>
          <b-form-select 
            name="status" 
            class="fields-dropdown" 
            v-model="currentOpsIds[index]"
          > 
            <option 
              v-for="jsonOperation in jsonOperations" 
              :key="jsonOperation.id" 
              :value="jsonOperation.id"
            >
              {{ jsonOperation.name }}: {{ jsonOperation.type }} - {{ jsonOperation.active ? 'active' : 'inactive' }}
            </option>
          </b-form-select>
        </td>
      </tr>
    </tbody>
  </div>
</template>
<script>
export default {
  data() {
    return {
      jsonOperations: [],
      currentOpsIds: [], // 存储已选操作的id，而非对象
    }
  },
  mounted() {
    // 假设已从接口获取currentOps和jsonOperations原始数据
    // 将currentOps转换为id数组
    this.currentOpsIds = this.currentOps.map(op => op.id);
  }
}
</script>

方法二：替换currentOps为jsonOperations中的引用对象 #

如果必须直接绑定对象，可以在初始化时，将currentOps中的对象替换为jsonOperations中对应的引用实例：

<template>
  <div>
    <tbody>
      <tr v-for="(currentOp, index) in currentOps" :key="currentOp.id">
        <td>
          <b-form-select 
            name="status" 
            class="fields-dropdown" 
            v-model="currentOps[index]"
          > 
            <option 
              v-for="jsonOperation in jsonOperations" 
              :key="jsonOperation.id" 
              :value="jsonOperation"
            >
              {{ jsonOperation.name }}: {{ jsonOperation.type }} - {{ jsonOperation.active ? 'active' : 'inactive' }}
            </option>
          </b-form-select>
        </td>
      </tr>
    </tbody>
  </div>
</template>
<script>
export default {
  data() {
    return {
      jsonOperations: [],
      currentOps: [],
    }
  },
  mounted() {
    // 假设已获取原始currentOps和jsonOperations数据
    // 替换currentOps为jsonOperations中的对应引用
    this.currentOps = this.currentOps.map(op => {
      return this.jsonOperations.find(item => item.id === op.id);
    });
  }
}
</script>

补充说明 #

• 优先选择方法一，基本类型（id）作为v-model值，可避免引用类型带来的匹配问题和响应式风险
• 根据结构截图，对象包含id、name、type、active等字段，满足唯一标识的需求
• 当前效果：下拉框加载后未选中任何选项，显示为空
• 期望效果：下拉框加载后自动选中currentOps对应的操作项，显示其名称、类型和状态

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