Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

router link class change on click ignored after the first time #3534

Closed
rrd108 opened this issue Apr 27, 2021 · 1 comment
Closed

router link class change on click ignored after the first time #3534

rrd108 opened this issue Apr 27, 2021 · 1 comment

Comments

@rrd108
Copy link

rrd108 commented Apr 27, 2021

Version

3.5.1

Reproduction link

https://codesandbox.io/s/vue-routing-example-forked-2ggs5?file=/views/Home.vue

Steps to reproduce

Step 1:
Click on any category link. The background turn to pink and the text grows. After 2 seconds the transition finishes, the user is redirected to the next page.

Step 2:
Click on Home, and than click on any category link.

What is expected?

The css class name should turn to active for the clicked link at step 2 the same way as it happens at step 1

What is actually happening?

At step 2 the css class is not set. The background color and the text size does not change.


The active variable is set on click, but it seems the :class binding does not get it only for the very first time. Tested on Arch Linux with Chromium 90.0.4430.85 and Firefox Developer Edition 89.0b4

I have animations what should run when the user clicks a link for the link they clicked on.

@posva
Copy link
Member

posva commented Apr 27, 2021

This is just how Vue transition work: they trigger at the same time you change the active class, so they never render after the change except for the first time because it needs to fetch the About page and Vue has the time to render once.

You can force this by waiting a tick but it's something you have to do on your own

<template>
  <div class="home">
    <h1>home</h1>

    <router-link
      v-for="category in categories"
      :key="category.id"
      :to="`/about/${category.id}`"
      v-slot="{ route, href }"
      custom
    >
      <a
        :href="href"
        @click.prevent="setActive(category.id, route)"
        :class="{ active: active == category.id }"
      >
        <h2>{{ category.name }}</h2>
      </a>
    </router-link>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      active: null,
      categories: [
        { id: 0, name: "Category 1" },
        { id: 1, name: "Category 2" },
        { id: 2, name: "Category 3" },
        { id: 3, name: "Category 4" },
      ],
    };
  },

  methods: {
    async setActive(id, route) {
      this.active = id;
      await this.$nextTick();

      this.$router.push(route)
    },
  },
};
</script>

@posva posva closed this as completed Apr 27, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants