Rails バックエンドから localAuthority 属性を渡す Vuetify を使用したデータテーブルがあります。空の子関連付け (ネストされた属性) を渡すまでは、すべてが正常に機能します。この場合「郡」:
リーリーつまり、上記の例では、すべてのレコードに郡の関連付け (belongs_to) がある限り機能します。ただし、レコードに「郡」が関連付けられていない場合は、次のエラーが表示されます:
リーリー次のような条件文を追加するなど、さまざまな方法を試しました。 リーリー
しかし、何もうまくいかないようです。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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 スロットを見てください。同様のオブジェクトの関連付けを理解するのに役立つかもしれません。