JavaScript - vue が props を介してオブジェクトを渡すときにエラーを報告する

Question

親コンポーネント App.vue

サブコンポーネントsonCp.vue

＃＃＃データ構造＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃

エラーが報告されましたが、データはレンダリングできます

データを正しく取得しているかどうかを確認してください。created に入れたほうがよいですか?

Answer 1

サブコンポーネントは最初は空の文字列を取得し、.acount.name などの属性を持たなかったため、エラーが発生しました。

最も簡単な解決策:

親コンポーネント App.vue 内の

リーリー

次のように変更されました:

リーリー

Answer 2

非同期的にリクエストされたデータは 2 回レンダリングされます。 1 回目は、リクエストが完了していないときです。この時点で、obj が返されます。次に、サブコンポーネントが値を取得すると、エラーが発生するはずです。 2 回目はリクエストが返され、データが返されたときです。したがって、解決策は明らかであり、解決策はたくさんあります。

Answer 3

最初、dataObj は null 文字であるため、サブコンポーネントに渡されると必ずエラーが報告されます。v-if を使用してデータが取得されたかどうかを判断し、取得後にレンダリングできます。

Answer 4

1. 前述のように、データがある場合に確実にレンダリングできるように、v-if を使用して dom 内の dataObj.length を決定します (推奨!!)。

2. 親コンポーネントのデータ オプションで dataObj オブジェクトのデータ構造を事前に設定します。たとえば、次のようになります。 リーリー

さらに、作成者は、データ オプションで初期項目を予約するときに、適切なデータ型を選択してデフォルト値を割り当てるようにすることをお勧めします。たとえば、親コンポーネントの dataObj には配列型を格納する必要があります。 , そのため意味表現も明確になります。

Answer 5

リーリー