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

[Fabioni]

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 https://github.com/nuxt/nuxt.js/issues/10390#issuecomment-1100752569

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: https://github.com/nuxt/nuxt.js/issues/10390

[clyan]

<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]

<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

[emavitta]

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....

[John-Weak]

@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]

@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.