Vue.js如何正确展示下拉选中项并实现可移除徽章？

核心问题分析 #

1. 数据类型不匹配：sport.teamId 定义为单个值（null），但你用 v-for 循环它，单个值无法被正确迭代，导致渲染异常。
2. 变量关联错误：onTeamComboSelect 里操作的是 this.form 下的字段，但组件绑定的是 sport.teamId，两者未关联，选中后数据不同步。
3. 名称展示逻辑错误：直接绑定 sport.teamId 只能显示ID，无法展示团队名称，需通过 getTeamById getter 根据ID获取对应团队对象。
4. 语法错误：data() 缺少 return 语句、methodds 拼写错误、fetchTeamtDetails 拼写错误，这些都会导致功能失效。

具体修复步骤 #

1. 修正数据结构与变量关联 #

单选场景

确保方法操作与组件绑定的变量统一，修改 onTeamComboSelect：

async onTeamComboSelect({value}) {
    this.sport.teamId = value; // 绑定到sport对象，而非form
    this.additionalSearchField = {teamId: this.sport.teamId};
    await this.fetchTeamInfo({id: this.sport.teamId});
}

多选场景

先将 sport.teamId 改为数组类型：

data() {
  return { // 补全缺失的return
    sport: {
      name: '',
      sportSize: null,
      externalId: '',
      teamId: [], // 改为数组存储多选ID
    },
    teamTransformer: teamTransformer,
    comboConfig: {
      itemPerPage:30
    },
    additionalSearchField: null,
  }
},
// ...其他部分
methods: { // 修正methodds拼写错误
  ...mapActions({
            fetchTeamsByName: "fetchTeamsByName",
            fetchTeamDetails: "fetchTeamDetails", // 修正fetchTeamtDetails拼写错误
            fetchOfferByName: "fetchOfferByName",
            fetchTeamInfo: "fetchTeamInfo"
        }),
  // ...其他方法
}

2. 修复Badge渲染逻辑 #

单选场景

无需 v-for，直接通过getter获取团队名称：

<div class="sport-results-decoration">
  <div class="results" v-if="sport.teamId">
    <span class="badge badge-pill badge-success">
      <span>{{ getTeamById(sport.teamId)?.name || '未知团队' }}</span>
      <font-awesome-icon icon="times" class="close" @click="removeTeam()" />
    </span>
  </div>
</div>

多选场景

循环ID数组，逐个获取对应团队名称：

<div class="sport-results-decoration">
  <div class="results">
    <span
      v-for="teamId in sport.teamId"
      :key="teamId"
      class="badge badge-pill badge-success"
    >
      <span>{{ getTeamById(teamId)?.name || '未知团队' }}</span>
      <font-awesome-icon
        icon="times"
        class="close"
        @click="removeTeam(teamId)"
      />
    </span>
  </div>
</div>

3. 实现移除方法 #

methods: {
  // ...其他方法
  removeTeam(teamId) {
    // 单选场景
    if (!Array.isArray(this.sport.teamId)) {
      this.sport.teamId = null;
    } 
    // 多选场景
    else {
      this.sport.teamId = this.sport.teamId.filter(id => id !== teamId);
    }
  }
}

4. 移除冗余代码 #

删除多余的隐藏输入框，combo-select 已通过 v-model 绑定 sport.teamId，重复绑定会导致数据冲突：

<!-- 以下代码可以删除 -->
<input
  v-model="sport.teamId"
  type="hidden"
  name="teamId"
  class="form-control"
  :data-vv-scope="sections[0].name"
  value="team"
>

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