componentで気をつけるべきこと!さてさて、このところLaravel関連の記事ばかりを投稿していることに気づいたんで、今回はこれもすでに私の開発環境には欠かせない存在のVueのお話です。Vueには「Component」という、簡単に言うと「使いまわしができる独自のHTMLタグ」をつくることができる便利機能が備わっています。以下のようにすると、Googleマップへのリンクに特化したHTMLタグを作成することができます。}});これをHTMLタグとして使いたい場合は、こうします。address="東京都墨田区押上1丁目1−2"></google-map-link>実際の表示はこうなります。Vueで指定した要素内で実行しないといけいませんが、一回こういったコンポーネントを作っておくと、後からいくらでも使いまわしができるのでとても重宝しています。componentを利用すると、開発の効率化が進むためできるだけ導入するように心がけているんですが、気をつけておかないとコンポーネントがうまく動作しない状況があります。そのうちのひとつが「テーブル内でコンポーネントを使う」場合です。以下のケースを見てみましょう。}});Vueの中に、変数としてnamesという名前の配列が入ったシンプルなコードです。通常だと、以下のように「tdタグ」を使ったりして内容を表示するかと思います。</tr></table>実行結果はこうなります。うまく行かない例では、次は通常の「tdタグ」ではなく、独自のコンポーネントを使ってやってみましょう。コンポーネント自体は、名前を表示するだけのシンプルな内容です。v-text="name"></td>'});もちろん、テーブルの一部として表示したいので、template内には「tdタグ」のみを配置します。このコンポーネントを使ってさっきと同じように名前を表示してみましょう。</tr></table>コメントにも書いてあるとおり、この例はうまく名前は表示されません。(画面に何も表示されません。)うまくいく例では、どうすればうまくいくかというと、Vueは解決策として「is」という専用の属性を提供しています。使い方はこうなります。</tr></table>「is」の中に表示したいコンポーネント名を入れるだけでOKです。これでうまく表示することができるようになりました。うまくいかないのか??では、なぜうまくいかないかを検証するために以下のようなもっとシンプルな例で見てみましょう。</tr></table>これを実行すると、実は「桃太郎」という文字は表示されます。デベロッパーツールを使って表示コードを見てみるとこうなっています。</tbody></table>本来あるべき「桃太郎」の「tdタグ」がテーブルの外にはじき出されてしまっています。「tableタグ」のように、HTMLタグの中には「決められたタグ以外は無効にします」という制限がかかっているものがあるために、うまく表示ができなくなってしまったのです。そのため、「is」属性を使った解決策でも「tdタグ」を使っていたというわけなんですね。ちなみに、こういった制限を受けるのは以下の4つです。(どれも内部で決められたタグを使う構造になってますね)uloltableselectということで、今回は短いですがこんなところです。今後のVueを使った開発では気をつけておいてくださいね。開発スキルプログラム開発は15年以上。Laravel、Vue.jsをメインとしてPython(機械学習)やElectronの開発もお引き受けしております。過去2度カナダのバンクーバーに滞在していました。開発状況によりましては開発をお待ちいただく可能性がございますが、いつでもご相談は受けさせていただいております。お気軽にご連絡ください!お問い合わせフォーム開発してほしい機能を募集中!MITライセンスで公開します。詳しくはこちらの記事をご覧ください。ぷれりり・プレスリリース掲載無料のプレスリリース・スタンド!播磨孤道(はりまこどう)兵庫周辺のゆったり自転車一人旅の記事を書いていきます。