vue3 js コンポーネント: コンポーネントが更新されていません

Question

API からデータを収集するコンポーネントがあります。 API から返されるデータは、詳細を含む配列です。配列内の値の 1 つはレンダリングされるコンポーネントのタイプであり、他のすべてのデータはコンポーネントに渡されます。 データベースから返された値に基づいて正しいコンポーネントをレンダリングしようとしていますが、残念ながら機能しません。 私は Vue を初めて使用しますが、vue2 では動作しますが、コンポジション API を使用して Vue 3 で動作することを願っています。

これは、置き換えたいコンポーネント コードです:

リーリー

ブラウザで表示すると、実際には次のように表示されますが、SelectInput コンポーネントを使用しません:

リーリー

SelectInput はディレクトリのコンポーネントであり、:is 値をハードコードすると、次のように期待どおりに機能します。 リーリー

私の完全なコンポーネントは

component コンポーネントを呼び出し、コンポーネントを交換します: ああああ

Answer 1

コンポーネントのファイル名が問題のオブジェクトの型指定子と等しい場合は、それらを動的にインポートしてコード行を節約できます。

これにより、より多くの型を作成すると、このコンポーネントに触れる必要がなくなるため、スケーラビリティの向上にもつながります。

Answer 2

スクリプト設定 を使用していたため、コンポーネントに名前が付けられていなかったため、 コンポーネント コンポーネントはどのコンポーネントをレンダリングするかを認識できませんでした。

そこで、コンポーネントとコンポーネントへの参照を含むオブジェクトを作成します。

const コンポーネント = {
        'SelectInput': 選択入力、
        'TextareaInput': テキストエリア入力
    };

表示したいコンポーネントを取得し、それを実際のコンポーネントにリンクする別の関数:

const コンポーネントタイプ = (タイプ) => コンポーネント[タイプ];

次に、テンプレート内で関数を呼び出し、正しいコンポーネントをレンダリングします。

完全な修正コード:

これが正しいアプローチであるかどうかはよくわかりませんが、正しいコンポーネントがレンダリングされるようになりました。