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があったとします。
|
1 2 3 4 5 |
Vue.component('errors-list', { props: ['errors'], template: '<tr v-if="errors.length"><th><div v-for="error in errors"><b>{{ error }}</b></div></th></tr>' }) |
これをHTML上で次のように表現してしまうと、テーブルの外に出て描画されてしまいます。
|
1 2 3 |
<table> <errors-list :errors='document_file_errors'/> </table> |
これを避けるためには、Vue.jsの公式ドキュメントに書かれている通り、次のように書く必要があります。
'エラーが入っている配列’はあくまでこの場合の例です。
componentに合った変数を入れる必要があります。
|
1 2 3 |
<table> <tr is="errors-list" :errors='エラーが入っている配列'><tr/> </table> |
ちなみに参考にした公式ドキュメントはこちらです。
https://vuejs.org/v2/guide/components.html#DOM-Template-Parsing-Caveats
Vue.jsは落とし穴がいっぱいですね。
終わりに
今回はVue.jsでcomponentを使った時にtrやli,ulの中の要素が外に出てresponsiveクラスが生成してしまう問題の対処法についてご紹介いたしました。