質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Q&A

6回答

15714閲覧

Vueのプラグインを入れたらエラーが出てしまいました……

minamiT

総合スコア6

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

0グッド

0クリップ

投稿2017/05/17 07:54

編集2022/01/12 10:55

閲覧してくださってありがとうございます。
私はvue初心者なんですが、ひょんなことからvueの知識が必要な
nuxt.config.jsというフレームワークを使って作業をしていたのですが…

私はテーブルを作成するため、vue-data-tableというプラグインを

plugins: [ { src: '~plugins/vue-data-tables', ssr: false } ],

上記のようにいれました。画面上は問題なく動くのですが、
Consoleで確認すると下記のようなエラーが出てきてしまいます。

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

何故このエラーが出るのか正直まったく分かりません(;O;)
どうすればこのエラーを解消できますでしょうか?
大変お手数だと思いますが、詳しい方のお力をお借りしたいです……

追記(実際に書いているコード)

<template> <data-tables> <el-table-column></el-table-column> </data-tables> </template> <script> </script>

タグの閉じ忘れ、インデントが可笑しい箇所がないか調べるため、
一度上記のコードだけにしてみたのですが、やはりエラーは変わらずでした。。。

私が参照したリンクです

nuxt.jsプラグインの入れ方
vue-data-table

###補足情報
vue / nuxt / javascript / 初心者

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答6

0

時間の経ったご質問への回答になりますが、その後解決されたでしょうか…(・∀・)?

閉じタグやインデントの誤りを気にされていたようですが、そうでなくともこの指摘は発生します。
特にインデントは、人間が見やすいように入れるものであって、インデントの深さが適当でも、なんならインデントも改行も一切なくても、問題ありません。

指摘文のとおりですが、
nesting block-level elements inside <p>, or missing <tbody>.

<p> This is <div>my text.</div> </p>

これは閉じタグもインデントも間違っていませんが、<p>の中にブロックレベル要素である<div>を入れた例です。

<table> <tr> <td>This is my cell</td> </tr> </table>

これも閉じタグもインデントも間違っていません。<tbody>の無いテーブルの例です。

どちらも「書き方」は間違っていませんが、「HTMLとして」は間違っています。
<tbody>なんかは書かなくてもブラウザが意図どおり表示してくれてしまうので<tbody>を意識しない人も多いようですが、テーブルコンテンツは本来<tbody>に包含するのが正しい構造です。ブラウザ側でのレンダリングでは勝手に表示してくれても、サーバ側でのレンダリング結果とは差があります。その指摘です。

書き方でなく DOM ツリー構造に注目してみてください。

当件の直接的な回答を得るのは難しいと思います。
「vue-data-table」がどんな構造のDOMツリーを最終的に吐き出すのかわからないと何とも言えません。
ですので、ご自身で書いた部分だけでなく「vue-data-table」が吐いたコードまで含めて、たとえば Developer Tools > Elements を開いてDOM 全文を示さないとどこが悪いかわかりませんが、さすがに長大な全文掲載もそれはそれで回答を得にくく、どちらにせよずばりの回答は得にくい件かと思います。

解決方法としては、一部分をコメントアウトしてリロードして、まだ指摘されるならまた少しコメントアウトしてリロードして、、を繰り返して、指摘が出なくなったら直近にコメントアウトした部分が問題箇所…という洗い出し方が結局一番早いと思います。

投稿2019/03/09 20:22

mochi.monaka

総合スコア26

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

>The client-side rendered virtual DOM tree is not matching server-rendered content.
クライアント側で作った仮想DOMとサーバー側のコンテンツが合わないんじゃない?

って意味かなぁと
英語苦手だしVueはまだ触り始めて1か月のド素人だけから見当外れかもしれないけど

投稿2017/06/04 12:22

len_souko

総合スコア1337

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

minamiT

2017/06/06 04:41

ご返答ありがとうございます。実はlen_souko様が仰る通り、コンテンツが合わないためエラーが出てるのではないか?と模索していた所です…(´;ω;`)コンテツが合わない場合の解決策を検討中です。。。
guest

0

HTML

1<client-only> 2 <data-tables> 3 <el-table-column></el-table-column> 4 </data-tables> 5</client-only>

のように、client-only タグで囲むことで、私は回避しました。

投稿2021/03/29 04:47

tkym56

総合スコア6

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

{ src: '~plugins/vue-data-tables', ssr: false }

ssr: falseとなっているのが気になります。
nuxt.jsを使うということはSSRするはずなので、ここをfalseにしちゃうと、サーバー側とクライアントで違いが出る言われてしまうのではと推測しました。

投稿2017/06/15 05:45

sakapun

総合スコア888

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

html

1<template> 2 <data-tables> 3 <el-table-column></el-table-column> 4 </data-tables> 5<template> ←スラッシュを忘れていませんか? 6<script> 7</script>

投稿2017/06/06 05:00

kaorun343

総合スコア47

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

minamiT

2017/06/06 05:22

ご返答ありがとうございます(-_-;)大変申し訳ありません!追記を書いたときのミスです… 実際に書いているコードは、閉じタグなど私以外の方に確認してもらいましたが、問題ありませんでした。 今回、data-tablesのプラグインを入れてのエラーだと思っていたのですが… 別ページで他のプラグイン入れたら、質問と同じエラーが発生してしまいました_| ̄|○
guest

0

何故このエラーが出るのか

This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>.

と書いてありますよ

投稿2017/05/19 13:36

takaboo

総合スコア195

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

minamiT

2017/06/02 03:05 編集

回答ありがとうございます。閉じタグやインデントがおかしければすぐエラーが出てくるのですが… 現状、追記で記載したコードしか書いていないのですが…どうもダメみたいです。。。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問