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

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

[ywymoshi]

<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 😄 I corrected it