版本
2.6.14
复现链接
复现步骤
- nuxt: v2.15.18
- node: v16.14.0
<span v-for="(obj, index) in objs" :key="obj.id">{{ "" }}<span>Test</span></span>对我来说，重要的是在这个用例中
<span v-for="(obj, index) in objs" :key="obj.id">{{ index > 0 ? ", " : "" }}<wbr v-if="index > 0"><span>{{obj.text}}</span></span>我对没有nuxt的vue了解不多，所以我不能说如何复现sss,只是通过这条评论来到这里的：nuxt/nuxt#10390 (评论)
我在nuxt.config中使用了 nuxt dev 和 target: 'static'。
预期结果是什么？
正常的hydration
实际发生的情况是什么？
我得到了一个hydration不匹配，因为在ssr上，nuxt似乎认为有一个空内容和未定义类型的节点，而在客户端正确地没有节点。
解决方法
请改用以下方法：
<span v-for="(obj, index) in objs" :key="obj.id"><span>{{ "" }}</span><span>Test</span></span>或者
<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>首次在这里发布的问题：nuxt/nuxt#10390
5条答案
按热度按时间fcwjkofz1#
<span v-for="(obj, index) in objs" :key="obj.id">{{ index > 0 ", " : "" }}<wbr v-if="index > 0"><span>{{obj.text}}</span></span>{{ index > 0 ", " : "" }} 这个句子缺少一个问号，应该是 {{ index > 0 ? ", " : "" }}
p1iqtdky2#
<span v-for="(obj, index) in objs" :key="obj.id">{{ index > 0 ", " : "" }}<wbr v-if="index > 0"><span>{{obj.text}}</span></span>{{ index > 0 ", " : "" }} 这个句子缺少一个问号，应该是 {{ index > 0 ? ", " : "" }}
显然是我问题中的一个拼写错误：D
我已经纠正了它
aoyhnmkz3#
在您的代码沙箱链接中，您使用id作为键...并且每个条目都是一样的。键应该是唯一的。尝试使用
:key="obj.text",或者更改id的值。不确定这是否解决了您的问题，看起来只要键正确，它就能正常工作...。
zfycwa2u4#
正确的SSR复制链接：
https://stackblitz.com/edit/vue-12523-ctf5n4?file=app.js
您也可以在第15行切换布尔值，以在解决方法(切换后重启服务器)之间切换。
我认为它已经在Vue 3中修复了。
w80xi6nr5#
@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.