Nuxt.jsを含めて、Vue.jsの2.xを使ってSSR(サーバーサイドレンダリング)をする場合に、 v-for
の箇所で下記のようなエラーが出る場合がある。
The client-side rendered virtual DOM tree is not matching server-rendered content.
再現したコードはこれ( items
は単純な文字列の配列)。
ちなみにVue.jsのバージョンは 2.2.6
<template v-for="item in items">
{{ item }}
</template>
回避するには、下記のように個々を要素で囲ってあげる。
<template v-for="item in items">
<span>{{ item }}</span>
</template>
クライアントサイドのみではエラーは出ず、ちゃんとレンダリングされるので、サーバ側の実行ロジックにバグがあるのかもしれない。