J'ai une table de données utilisant Vuetify qui transmet la propriété localAuthority à partir d'un backend Rails. Tout fonctionne bien jusqu'à ce que je passe une association enfant vide (attribut imbriqué). Dans ce cas « comté » :
<script>
import axios from "axios";
export default {
name: 'LocalAuthorityIndex',
props: {
localAuthorities: {type: Array, default: () => []},
counties: {type: Array, default: () => []},
localAuthorityTypes: {type: Array, default: () => []}
},
data() {
return{
search: '',
dialog: false,
testmh: 'hello',
dialogDelete: false,
headers: [
{ text: 'Name', align: 'start', value: 'name' },
{ text: 'ONS Code', value: 'ons_code' },
{ text: 'ID', value: 'id' },
{ text: 'Population', value: 'population' },
{ text: 'county', value: 'county.name' },
{ text: 'Website', value: 'website' },
{ text: 'Actions', value: 'actions', sortable: false },
],
Donc, dans l'exemple ci-dessus, cela fonctionnera tant que tous les enregistrements ont des affiliations à un comté (belongs_to). Cependant, si un enregistrement n'est pas associé à un « comté », vous recevrez l'erreur suivante :
[Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading 'name')"
J'ai essayé de nombreuses façons, par exemple en ajoutant des instructions conditionnelles comme celle-ci :
{ text: 'county', value: ('county.name' ? 'county.name' : nil )},
Mais rien ne semble fonctionner.
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Sur la base du code
<v-data-table>sur Codepen, je vois que vous écrasez l'emplacement d'entrée de table par défaut avec votre propre code.Votre erreur vient de cette partie du code :
Regardez la première chaîne.
#item.county.name是v-slot:item.county.name的缩写形式，来自headersUne des chaînes du tableau :... { text: 'county', value: 'county.name' },Donc pas d'erreur, même si votre item ne contient aucun county, cette partie sera analysée correctement par la bibliothèque vuetify.
L'erreur se produit dans la troisième chaîne du code ci-dessus. Vous essayez d'imprimer le nom du comté sans vérifier s'il existe. C'est pourquoi vous obtenez l'erreur
...无法读取未定义的属性....Je pense que vous pouvez résoudre votre problème comme ceci :
Bien sûr, si vous devez masquer le lien du comté dans ce cas, vous pouvez également mettre
v-if（或v-show）添加到adans le tag.J'ai également créé un petit Codepen en utilisant des données statiques. Jetez un œil à l'emplacement item.name.text dans ce terrain de jeu, cela vous aidera peut-être à comprendre des associations d'objets similaires.