如何處理前一個物件的變化

我目前正在制作導航欄。我創建了一個陣列來存盤導航欄中選項卡的資訊。

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

單擊新路由時，它會更新新單擊的選項卡以允許當前屬性為真。

您如何將先前的導航項更改為 false。目前，當它們被點擊時，它們都會一一變為真。

我想如果我像以前一樣存盤一個值

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

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

這就是我的自動取款機，它必須向前走 3 條路線，直到消失之前的那條路線......

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

uj5u.com熱心網友回復：

在路由名稱上創建觀察者

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

通常你可以使用routeName上面的 watcher 值來運行你想要的任何副作用，但是如果current在每個選項卡上跟蹤確實是必要的，上面的代碼將完成作業。

標籤：javascriptVue.jsVuejs3

上一篇：使用應用計時器測驗KarmaAngularNgRX效果

下一篇：房間資料庫查詢-洗掉用戶