Vue.js中如何根据其他下拉选择框的选中值禁用对应选项

我来帮你搞定这个Vue里的下拉框选项互斥问题！核心思路是利用Vue的响应式数据跟踪已选中的选项，然后在渲染每个选项时动态判断是否需要禁用。

第一步：重构模板（减少重复代码） #

你现在写了8个重复的下拉框，用v-for循环生成会更简洁易维护，也方便后续扩展：

<template>
  <div class="card-body">
    <div v-for="(item, index) in 8" :key="index">
      <label>Polje {{ index + 1 }}:</label>
      <select v-model="selectedValues[index]">
        <!-- 针对第7个下拉框单独处理图片显示 -->
        <option 
          v-for="podatak in podaci" 
          :key="podatak.id"
          :disabled="shouldDisableOption(podatak.name, index)"
        >
          {{ podatak.name }}
          <img v-if="index === 6" :src="podatak.url" alt="">
        </option>
      </select>
    </div>
  </div>
</template>

第二步：编写核心逻辑 #

在组件的script部分，我们需要维护选中状态，并实现禁用判断的方法：

<script>
export default {
  data() {
    return {
      podaci: [], // 这里存放你从数据库获取的选项数据
      selectedValues: new Array(8).fill(null) // 8个元素对应8个下拉框的选中值，初始为空
    };
  },
  methods: {
    shouldDisableOption(optionName, currentBoxIndex) {
      // 检查该选项是否被其他下拉框选中
      return this.selectedValues.some((selectedVal, index) => {
        return index !== currentBoxIndex && selectedVal === optionName;
      });
    }
  },
  // 模拟从数据库获取数据的逻辑
  mounted() {
    // 实际项目中替换成你的接口请求
    this.podaci = [
      { id: 1, name: 'A', url: 'a-image-url' },
      { id: 2, name: 'B', url: 'b-image-url' },
      { id: 3, name: 'C', url: 'c-image-url' },
      { id: 4, name: 'D', url: 'd-image-url' }
    ];
  }
};
</script>

逻辑说明 #

• selectedValues数组：每个索引对应一个下拉框的选中状态，Vue的响应式系统会自动跟踪它的变化
• shouldDisableOption方法：接收当前选项名称和下拉框的索引，遍历所有选中值，只要发现其他下拉框已经选了这个选项，就返回true（禁用该选项）
• 第7个下拉框的图片通过v-if="index === 6"判断（因为v-for索引从0开始），完全保留你原来的需求

额外细节 #

当你取消某个下拉框的选中值时，selectedValues对应位置会变为null，此时shouldDisableOption会自动重新计算，其他下拉框的该选项会自动解除禁用，完全符合交互预期。

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