Vue.jsでcomponentを使った時にtrやli,ulが外に出てしまう問題の対処法

今回はVue.jsでcomponentを使った時にtrやli,ulの中の要素が外に出てresponsiveクラスが生成してしまう問題の対処法についてご紹介いたします。



Vue.jsでcomponentを使った時にtrやli,ulが外に出てしまう問題の対処法

Vue.jsのcomponentを使った時に、trやli,ulを使っていると、テーブルやリストの外に出てしまうことがあります。

例として、次のVue componentがあったとします。

これをHTML上で次のように表現してしまうと、テーブルの外に出て描画されてしまいます。

これを避けるためには、Vue.jsの公式ドキュメントに書かれている通り、次のように書く必要があります。
‘エラーが入っている配列’はあくまでこの場合の例です。
componentに合った変数を入れる必要があります。

ちなみに参考にした公式ドキュメントはこちらです。
https://vuejs.org/v2/guide/components.html#DOM-Template-Parsing-Caveats

Vue.jsは落とし穴がいっぱいですね。

終わりに

今回はVue.jsでcomponentを使った時にtrやli,ulの中の要素が外に出てresponsiveクラスが生成してしまう問題の対処法についてご紹介いたしました。

最後までお読みいただきありがとうございます。
ブログやTwitterでのシェアOKです。
コメントもお待ちしております。
誤植や勘違いなどございましたらコメント欄にて教えていただけると幸いです。






Vue.js

Posted by ちこ