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

Jump to bottom

Hydration mismatch at {{ "" }} inside v-for #12523

Open
Fabioni opened this issue Apr 17, 2022 · 7 comments
Open

Hydration mismatch at {{ "" }} inside v-for #12523

Fabioni opened this issue Apr 17, 2022 · 7 comments

Comments

@Fabioni
Copy link

@Fabioni Fabioni commented Apr 17, 2022 •
edited

Version

2.6.14

Reproduction link

codesandbox.io

Steps to reproduce

  • nuxt: v2.15.18
  • node: v16.14.0
<span v-for="(obj, index) in objs" :key="obj.id">{{ "" }}<span>Test</span></span>

Important for me was it in this usecase

<span v-for="(obj, index) in objs" :key="obj.id">{{ index > 0 ? ", " : "" }}<wbr v-if="index > 0"><span>{{obj.text}}</span></span>

I don't know that much about vue without nuxt, so I can't say how to reproduce sss, just came here by this comment nuxt/nuxt.js#10390 (comment)

I used nuxt dev with target: 'static' in nuxt.config.

What is expected?

normal hydration

What is actually happening?

I get a hydration mismatch because nuxt on ssr somehow thinks there is a node with empty content and undefined type and on clientside there correctly no node.

Workaround

use instead:

<span v-for="(obj, index) in objs" :key="obj.id"><span>{{ "" }}</span><span>Test</span></span>

resp.

<span v-for="(obj, index) in objs" :key="obj.id"><span v-if="index > 0">, </span><wbr v-if="index > 0"><span>Test</span></span>

First posted issue here: nuxt/nuxt.js#10390
@ywymoshi
Copy link

@ywymoshi ywymoshi commented Apr 18, 2022

<span v-for="(obj, index) in objs" :key="obj.id">{{ index > 0 ", " : "" }}<wbr v-if="index > 0"><span>{{obj.text}}</span></span>

{{ index > 0 ", " : "" }} This sentence is missing a question mark, it should be {{ index > 0 ? ", " : "" }}

@Fabioni
Copy link
Author

@Fabioni Fabioni commented Apr 18, 2022 •
edited

<span v-for="(obj, index) in objs" :key="obj.id">{{ index > 0 ", " : "" }}<wbr v-if="index > 0"><span>{{obj.text}}</span></span>

{{ index > 0 ", " : "" }} This sentence is missing a question mark, it should be {{ index > 0 ? ", " : "" }}

Obviously just a typo in my question :D
I corrected it

@logovitta
Copy link

@logovitta logovitta commented Apr 27, 2022 •
edited

In your codesandbox link, you use the id as the key... and it's the same for every entry. The key as to be unique. Try using
:key="obj.text", or change the value of the id.
Not sure if this solve your problem, it seems to work properly with the correct key....

@phanyenvy

This comment was marked as spam.

Sign in to view
@phanyenvy
Copy link

@phanyenvy phanyenvy commented May 4, 2022

hihdifhd

dfkjdkfjkdfjkdf

@phanyenvy phanyenvy mentioned this issue May 4, 2022
Closed
@John-Weak
Copy link

@John-Weak John-Weak commented Jun 14, 2022 •
edited

@Fabioni
Proper SSR Reproduction link:
https://stackblitz.com/edit/vue-12523-ctf5n4?file=app.js

You may toogle the bool at line 15 to switch between workaround(restart the server after toggle)

I think it is fixed in Vue 3

@John-Weak
Copy link

@John-Weak John-Weak commented Jun 15, 2022

@Fabioni Proper SSR Reproduction link: https://stackblitz.com/edit/vue-12523-ctf5n4?file=app.js

You may toogle the bool at line 15 to switch between workaround(restart the server after toggle)

I think it is fixed in Vue 3

If you restart the hyrdation error is not present,but if do not restart the error is present.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@John-Weak @Fabioni @ywymoshi @logovitta @phanyenvy