Vuetify データ テーブルのヘッダー配列は空のサブ関連付けを受け入れません

Question

Rails バックエンドから localAuthority 属性を渡す Vuetify を使用したデータテーブルがあります。空の子関連付け (ネストされた属性) を渡すまでは、すべてが正常に機能します。この場合「郡」:

リーリー

つまり、上記の例では、すべてのレコードに郡の関連付け (belongs_to) がある限り機能します。ただし、レコードに「郡」が関連付けられていない場合は、次のエラーが表示されます:

リーリー

次のような条件文を追加するなど、さまざまな方法を試しました。 リーリー

しかし、何もうまくいかないようです。

Answer 1

Codepen の <v-data-table> コードに基づくと、デフォルトのテーブル エントリ スロットを独自のコードで上書きしていることがわかります。

あなたのエラーはコードのこの部分に由来しています:

リーリー

最初の文字列を見てください。 #item.county.name は、headers 配列内の文字列の 1 つからの v-slot:item.county.name の省略形です:

リーリー

したがって、item に county が含まれていない場合でも、エラーは発生しません。この部分は vuetify ライブラリによって正しく解析されます。

上記のコードの 3 番目の文字列でエラーが発生します。 county の name が存在するかどうかを確認せずに出力しようとしています。そのため、「...未定義... のプロパティを読み取れません」エラーが発生します。

次のように問題を解決できると思います:

リーリー

もちろん、この場合に郡リンクを非表示にする必要がある場合は、v-if (または v-show) を a に追加することもできます。ラベルにあります。

また、いくつかの静的データを含む小さな Codepen も作成しました。このプレイグラウンドの item.name.text スロットを見てください。同様のオブジェクトの関連付けを理解するのに役立つかもしれません。