search

nuxt-community / vuetify-module

Vuetify Module for Nuxt 2
Other
628 stars 106 forks source link

[BUG] The contents of v-card children are duplicated when an anchor tag is added #499

Open mostafa7904 opened 2 years ago

mostafa7904 commented 2 years ago

All the packages version:

"nuxt": "^2.15.8",
"@nuxtjs/vuetify": "^1.12.3"
"vue": "^2.6.14",
"vuetify": "^2.6.4",
"webpack": "^4.46.0"

The contents of v-card-* is duplicated when the link and href attributes are present on the parent v-card and there is an anchor tag in v-card-*.

To Reproduce Github repo to reproduce the bug Just run the project and you will see the bug.

Steps to reproduce the behavior:

  1. Add a v-card element to your page
  2. Add the link and href attributes to the v-card component
  3. Add an anchor tag in the v-card-text or v-card-subtitle or v-card-actions
  4. You should now see double the contents, if not reload the page.

Expected behavior The contents of v-card-text and v-card-actions should not be duplicated.

Screenshots

Screenshot 2022-03-27 140530

Screenshot 2022-03-27 152152

Additional context This bug only appears in Nuxt so I thought this would be the repo to report this issue, if you reckon it's Vuetify's issue I will open the same issue in Vuetify's repo.

The anchor tag has to be in one of v-card child components (v-card-text, ...).

If you don't see the duplicate content, refresh the page.

bastianhilton commented 1 year ago

Look in your developer console in the browser, its probably related to Hydration issues like mine was. The actual fix for me on Nuxt 3 was to disable ssr in my nuxt.config.js

ssr: false,

Caceresenzo commented 1 year ago

This is the thing. I need to use SSR.

The HTML Spec does not allow a div to be inside an anchor tag, and will auto-close directly when encountering one.

Then Vue tries to hydrate will see that the DOM is not as it should, give a warning and try to correct itself but without removing the extra nodes.

Maybe using spans instead of divs with display: block would help?

SihemBouhenniche commented 1 year ago

Actually what I've noticed is that i can not put an anchor inside another anchor, some thing like that : <a> <div> some text </div> <a>Anchor</a> </a> and if you see at the implementation of v-card you can figure that is an anchor element. So, yeah to avoid that using span instead of divs withdisplay: block` will help (https://github.com/nuxt-community/vuetify-module/issues/499#issuecomment-1502991847)