I have data that contains 2 roles in exact, software engineer, test engineer, and each roles contains three subroles like in software engineer it has, react, vue, and node while in test engineer role it has three subroles which are test trainee, qa trainee, and tester. I loop them on job-subroles.vue component using the v-for to display the subroles of each roles in each separate tab. I tried to create a condition base on index to display only the selected subrole and hide the other 2 subroles when click on software engineer role tab only and it works fine. But the problem is the the test engineer role tab is also removing the subroles content although it was on the other tab and I'm not clicking on the test-engineer tab yet i know it is because of the index that i put but can't figure out how to fix it.

Here are my codes on my 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}}
                                       

And here are my codes on 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;
        },
      },
  };

CodePudding user response：

I looks like you are using the same component to display different content, depending upon which tab is selected on the left. When you click on a different role, Vue will use the same component and change the props passed to this component (i.e. activeContent and activeRole), but it won't recreate or reset the component in any way, so the data value selectedJobId does not get reset back to -1.

When this happens, you get a new list of your subroles displayed, but it's still using the same selection/filter via selectedJobId, as was used when the previous tab on the left was selected. That's why you aren't seeing all the subroles under the role.

The solution is to place a watch on one of the properties that change (activeRole is good) and whenever it changes reset selectedJobId to -1, so all the sub-roles for the new role are displayed.

    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
      }
    },