Nuxt中多角色标签页下卡片选中显示逻辑异常的解决方法

你的问题核心是全局的selectedJobId没有和当前角色绑定，导致切换角色标签页后，之前选中的index会影响其他角色的子角色显示。比如你在软件工程师标签页选中index=0，切换到测试工程师标签页时，测试工程师的子角色只有index=0的会显示，其他被隐藏，因为selectedJobId还是0。

修复步骤： #

1. 修改数据存储结构：把单一的selectedJobId改成按角色存储的对象，每个角色独立维护选中状态。

data() {
  return { 
    // 替换原来的selectedJobId
    selectedJobByRole: {
      'software engineer': -1,
      'test engineer': -1
    }
  }
}

2. 更新点击方法：点击子角色时，只更新当前activeRole对应的选中index：

methods: {
    selectJobContent(jobID, content){
        this.$router.push({ query: { role: this.activeRole, job: content } });
        // 只修改当前角色的选中状态
        this.selectedJobByRole[this.activeRole] = jobID;                
    }
},

3. 调整v-if判断条件：根据当前activeRole对应的选中状态来控制显示：

// 替换原来的v-if条件
section.all-roles-section(v-if="selectedJobByRole[activeRole] === i || selectedJobByRole[activeRole] === -1")

额外优化建议： #

• 如果角色可能动态增加，不要在data里硬编码角色名，可以在created钩子中初始化：

created() {
  // 根据父组件传入的角色列表动态初始化
  this.selectedJobByRole = this.$parent.roles.reduce((obj, role) => {
    obj[role] = -1;
    return obj;
  }, {})
}

这样修改后，每个角色的选中状态完全独立，切换标签页时不会互相影响，软件工程师标签页的选中操作只会影响自身的子角色显示，测试工程师标签页默认保持全部显示，直到你在该标签页内点击子角色。

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