仅当卡片被点击并隐藏nuxt中的另外2张卡片时，如何渲染选定的内容？

Question

我的数据包含确切的 2 个角色，软件工程师，测试工程师，每个角色都包含三个子角色，例如它在软件工程师中具有的 react、vue 和节点，而在测试工程师角色中，它具有三个子角色，即测试实习生 qa实习生，测试员。我使用 v-for 在 job-subroles.vue 组件上循环它们，以在每个单独的选项卡中显示每个角色的子角色。我尝试根据索引创建一个条件，以仅在单击软件工程师角色选项卡时仅显示选定的子角色并隐藏其他 2 个子角色，并且效果很好。但问题是测试工程师角色选项卡也删除了子角色内容，尽管它在另一个选项卡上，我没有点击测试工程师选项卡，但我知道这是因为我放的索引但不能不知道如何解决它。

这是我在 job-subroles.vue 上的代码

<template lang="pug">
section.has-background-gray
    .container.is-fluid.is-marginless.is-paddingless
        .col.d-flex.justify-content-center
            .column.is-6(v-for="content, i in activeContent" :key="i" @click="selectJobContent(i, content.job)")
                section.all-roles-section(v-if="selectedJobId === i || selectedJobId === -1")
                    .col.d-xl-flex
                        .card.border-0.flex-column.align-items-left.p-3
                            .card-body
                                .content
                                    h1 {{content.title}}
                                    .container-fluid.hybrid
                                        .row
                                            
                                            .col-lg-3.col-5.d-flex
                                                img.my-3.mr-2(src='/images/hiringImageVector.png', alt='My Team', title='My Team')
                                                p.ImageTextRight.my-3 {{content.imageTextRight}}
                                            .col-lg-4.col-7.d-flex
                                                img.my-3.mr-2(src='/images/hiringImageClock.png', alt='My Team', title='My Team')
                                                p.imageTextClock.my-3 {{content.imageTextClock}}
                                            .col-lg-5.shareApply     
                                                img.share.my-3.mr-3(src='/images/hiringImageShare.png', alt='My Team', title='My Team')
                                                p.shareText Share
                                                a.ButtonApplyNow.m-1(href='#', target='_blank', rel='noreferrer') 
                                                    p.buttonTextApply Apply now!
                                        
                                    <hr>
                                        p.headerIntro {{content.headerIntro}}
                                       

这是我在 job-subroles.js 上的代码

export default {
    name: "jobSubroles",
    props: {
          activeContent: {
              type: Array,
              required: true
          },
          activeRole: {
            type: String,
            required: true
        },
    },
    data() {
      return { 
        selectedJobId: -1,

      }
    },
    created() {
    },
    methods: {
        selectJobContent(jobID, content){
            this.$router.push({ query: { role: this.activeRole, job: content } });
            this.selectedJobId = jobID;                
        }
    },
    computed: {
        sideBarStatus() {
          return this.$store.getters.getSideBarStatus;
        },
      },
  };

Answer 1

我看起来您正在使用相同的组件来显示不同的内容，具体取决于左侧选择的选项卡。当您点击不同的角色时，Vue 将使用相同的组件并更改传递给该组件的道具（即活动内容和主动角色)，但它不会以任何方式重新创建或重置组件，因此数据值选定的工作 ID不会重置回-1。

发生这种情况时，您会显示一个新的子角色列表，但它仍然使用相同的选择/过滤器选定的工作 ID，就像选择左侧的上一个选项卡时使用的那样。这就是为什么您没有看到角色下的所有子角色。

解决方案是监视更改的属性之一（主动角色很好）并且每当它改变时重置选定的工作 ID为 -1，因此显示新角色的所有子角色。

    watch: {
      activeRole(oldValue, newValue) {
        // The activeRole has changed, so show all the jobs for this role.
        // This is required because this component is shared by all the roles in the sidebar.
        this.selectedJobId = -1
      }
    },