changing css class at page level-CodePudding

This code was working at component level, but when nuxt-child and nuxt-link is used instead of button, it changes the page, but the color remains the same. Do you know how this can be fixed?

<nuxt-link to="/head" :class="headButtonMode" @click="setSelectedTab('head-page')">
</nuxt-link>

<nuxt-link to="/" :class="mainButtonMode" @click="setSelectedTab('main-page')">
</nuxt-link>

<nuxt-child />

data() {
    return {
      selectedTab: "main-page",
    };
  },
  computed: {
    headButtonMode() {
      return this.selectedTab === "head-page" ? "head flat" : "head";
    },
    mainButtonMode() {
      return this.selectedTab === "main-page" ? "main flat" : "main";
    },
  },
  methods: {
    setSelectedTab(tab) {
      this.selectedTab = tab;
    },

CodePudding user response：

Try like:

  <button @click="setSelectedTab('main-page'); $router.push({path:'/head'})" :class="headButtonMode"> 
  </button>