How to handle the change of the previous object

I’m currently making a nav bar. I create an array storing the info of the tabs in the nav bar.

            tabs: [
                { name: 'All',id: "dash.courses.all", to: 'all', current: false },
                { name: 'Self-paced Learning',id: "dash.courses.oneToOneClasses", to: 'selfPacedLearningComp', current: false },
                { name: '30 Days Challenge',id: "dash.courses.selfPacedLearningComp", to: 'thirtyDaysChallenge', current: false },
                { name: 'Group Classes',id: "dash.courses.groupClasses", to: 'groupClasses', current: false },
                { name: '1-to-1 Classes',to: "dash.courses.thirtyDaysChallenge", to: 'oneToOneClasses', current: false },
            ]

When a new route is clicked it updates the newly clicked tab to allow the current property to be true.

How would you change the previous nav item to false. As currently they all change to true one by one as they are clicked.

I think if I store a value as previous

      setCurrent(tab)
      { 
          
          let newArr = this.tabs.map(obj => {
          if (obj.id === tab) {
            return {...obj, current: true};
          }

          return obj;
        })
        this.tabs = newArr
        console.log(newArr)
      }
    },

This is what i’ve got atm, it has to go around 3 routes ahead till the one before vanishes…

<script>
export default {
    components: {
    },
    data()
    {
        return {
            prevTab: null,
            tabs: [
                { name: 'All',id: "dash.courses.all", to: 'all', current: false },
                { name: 'Self-paced Learning',id: "dash.courses.oneToOneClasses", to: 'selfPacedLearningComp', current: false },
                { name: '30 Days Challenge',id: "dash.courses.selfPacedLearningComp", to: 'thirtyDaysChallenge', current: false },
                { name: 'Group Classes',id: "dash.courses.groupClasses", to: 'groupClasses', current: false },
                { name: '1-to-1 Classes',to: "dash.courses.thirtyDaysChallenge", to: 'oneToOneClasses', current: false },
            ]
        }
    },
    methods: {
      setCurrent(tab)
      { 
          this.prevTab = this.$route.name
          let newArr = this.tabs.map(obj => {
          if (obj.id === tab) {
            return {...obj, current: true};
          }
          if(obj.id === this.prevTab) {
            return {...obj, current: false}
          }

          return obj;
        })
        console.log('previous ',this.prevTab)
        console.log('route name', this.$route.name)
        this.tabs = newArr
      }
    },
    mounted()
    {
      this.prevTab = this.$route.name
      const newArr = this.tabs.map(obj => {
        if (obj.id === this.$route.name) {
          return {...obj, current: true};
        }

        return obj;
      });
      this.tabs = newArr
    }
}

Answer

Create a watcher on the route name

watch: {
    "$route.name": {
      handler(routeName) {
        this.tabs.forEach((tab) => (tab.current = routeName === tab.name));
      },
      // force eager callback execution
      immediate: true,
    },
  }

Usually you can just use the watcher routeName value above to run whatever side effect you want but if tracking current on each tab is really necessary the above code will get the job done.

Advertisement

Answer