Le tableau d'en-tête de table de données Vuetify n'accepte pas les sous-associations vides

Question

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.

Answer 1

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 的缩写形式，来自 headers Une 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）添加到 a dans 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.