前提・実現したいこと
ご覧いただきありがとうございます。
vue.js、teratail共に初心者なので、質問自体の情報が不十分かもしれませんがアドバイスをお願いしたく思います。
本題なのですが、動的にコンポーネントを作成することは可能でしょうか。
vue.jsを用いて、既存のアプリケーションの作り変えをしています。
今回詰まっているのは、プロジェクトの期間に応じて、入力フォームが増える機能の実装です。
元の仕様では、例えばプロジェクトの期間が2月から3月だった場合、
年月 | カラム1 | カラム2 |
---|---|---|
2月 | input | input |
3月 | input | input |
仮に、4月から6月だった場合は、
年月 | カラム1 | カラム2 |
---|---|---|
4月 | input | input |
5月 | input | input |
6月 | input | input |
のようになる仕様です。
レスポンシブ対応の点から、テーブルを使うのをやめて、
月ごとの入力フォームを備えたカードに作りタブで切り替えるようなデザインにしたいと考えています。
イメージは以下のような感じです。
情報が仕様だけになってしまい申し訳ありませんが、アドバイスをいただけたらと思います。
何卒よろしくお願いいたします。
発生している問題・エラーメッセージ
v-bind:is
を使ってコンポーネントを切り替えたいのですが、動的にコンポーネントを生成する方法がわかりません。
試したこと
data
の中に配列を作り、その中にコンポーネントを登録し、すでにあるコンポーネントを切り替えられるようにはしました。
しかし、年月に応じてコンポーネントを生成することができず、詰まっています。
補足情報(FW/ツールのバージョンなど)
vue.js
vuecli
あなたの回答
tips
プレビュー