Nuxt•11mo ago

NuxtLink create an a href="", but a click on it doesn't change page, anything happen

My NuxtLink isn't Working :

<td v-if="infoAnalysis.status === 'ready_to_report'">
   <NuxtLink :to="`/projects/${projectId}/report-${infoAnalysis.id}`">
       <v-btn small fab class="mx-0" variant="flat">
              <v-tooltip activator="parent" location="top">
                    Open report
              </v-tooltip>
              <v-icon>mdi-file-chart</v-icon>
         </v-btn>
    </NuxtLink>
</td>

<td v-if="infoAnalysis.status === 'ready_to_report'">
   <NuxtLink :to="`/projects/${projectId}/report-${infoAnalysis.id}`">
       <v-btn small fab class="mx-0" variant="flat">
              <v-tooltip activator="parent" location="top">
                    Open report
              </v-tooltip>
              <v-icon>mdi-file-chart</v-icon>
         </v-btn>
    </NuxtLink>
</td>

In the dom it creates an a href= : But in my front, when clicked, nothing happend And there is no error in the console

4 Replies

manniL•11mo ago

a reproduction would be helpful 🙂

Zeeeth•11mo ago

Isn't the problem that you've got a button inside a anchor? I think that's almost illegal? 😬

manniL•11mo ago

that is invalid indeed 😄 also, v-btn should have a nuxt and a to option @BobLamarley

And there is no error in the console

Tripped here, because button in a tag should give hydration errors

FiveDigitLP•11mo ago

It may be invalid, but that shouldn't be causing his problem. In our code, we put NuxtLinks around PrimeVue buttons that render the same as above and they work just fine.

Gaming

Programming

NuxtLink create an a href="", but a click on it doesn't change page, anything happen