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クラスが生成してしまう問題の対処法についてご紹介いたしました。

【お知らせ】
プログラミングのコンサルタントをすることを考えております。
下記の通り、かなり格安でご用意させていただいております。
【格安】プログラミングコンサル生募集(初心者向け、フリーランス志望向け)

詳しくは下記のリンクをご覧ください。
https://chico-shikaku.com/2020/10/programming-consult-2020/

11月くらいを目処に開始予定です。
最初は募集があれば先着5名くらいを目安に考えております。
質問や意見、問い合わせやお申し込みは下記のリンクよりお願いいたします。
https://docs.google.com/forms/d/e/1FAIpQLSeTXskmlyPAHuhwiOE9togqJPWdhXYCyRoVnFkkbS0VN0Ftug/viewform?usp=sf_link

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






Vue.js

Posted by ちこ