0
votes

Impossible d'accéder à une propriété dans un tableau d'objets

 Entrez la description de l'image

J'ai ces données ici dans mon produitHow.vue composant et lorsque j'essaie d'afficher les images du produit via la propriété i Obtenez cette erreur xxx

produitsShow.vue xxx


0 commentaires

3 Réponses :


0
votes

Essayez si cela fonctionne

    data: function () {
      return {
        product: {
          name:'',
          images:[]
        },
        quantity: 1
      }
    },


5 commentaires

J'ai un peu réparé le problème en attribuant une propriété null à la propriété de produit et je peux obtenir le chemin des images mais j'ai toujours reçu cet avertissement "TypeError: impossible de lire les" images "de NULL"


Si vous êtes sûr de savoir combien d'accessoires dans cette.Production, essayez de les initialiser avec une valeur vide, comme le produit: {images: []}


Il est bon que vous essayiez d'aider @waiaan. Il serait préférable que vous puissiez passer un moment à référer ci-dessous des directives de Stackoverflow sur la façon d'écrire une bonne réponse. Stackoverflow.com/help/how-to-answer Vous ne devez poster qu'une réponse si elle donne la solution et si Vous recherchez plus d'informations, vous pouvez utiliser des commentaires pour cela.


La propriété Images est une gamme d'objets Comment puis-je initialiser cela avec des valeurs vides?


J'ai et j'ai eu ceci "TypeError: ne peut pas lire la propriété" filtre "de non défini"



1
votes

Vous ne devez jamais faire confiance aux données d'un autre endroit comme un serveur distant

Le code est assez facile à briser par des données non valides, telles que le produit NULL, les images NULL, l'image sans chemin. Donc, dans la pratique réelle de jouer avec les données, il est très recommandé d'ajouter le type et la vérification de la valeur pour que l'accès est toujours sûr.

Comme dans Vuejs, il est assez facile d'atteindre cela à l'aide de V-si, seulement rendre le morceau de gabarit lorsque les données conservées (produit, images, image) sont fournies comme prévu. Ceci est appelé «programmation défensive».


10 commentaires

Ouais merci, j'ai déjà utilisé V-if = "Produit.Images" mais a obtenu cette "TypeError: impossible de lire" Images "de Null"


Le problème est qu'il s'agit d'un tableau d'objets. Je n'ai aucune idée de comment initialiser une valeur vide à cela


Essayez V-if = "Produit et produit.Image" Au lieu de cela que le produit soit probablement aussi NULL. Et qu'est-ce que "un tableau d'objets"? Les images?


Oui, recherchez les données de l'image ci-dessus et cette chose V-si la chose apporte cette erreur [Impossible de lire les images 'Images' de NULL] car les images ne sont pas initialisées par défaut


@Othmaneboumediane V-if = "Produit et produit.Image" saute le rendu jusqu'à ce que les images de propriété soient mises à jour pour NON NULL. N'est-ce pas résoudre le problème?


Il n'a pas! Je reçois toujours la même erreur que je pense que je devrais initialiser l'éventail d'images, mais ces images: [] ne fonctionne pas


Mon mauvais, il devrait être v-if = "produit && produit.images"


Oui, je sais que c'est ce que j'ai fait mais toujours triste visage :(


Laissez-nous Continuez cette discussion en chat .


Je viens d'initialiser le produit comme ce produit: {} puis utilisé V-if = "produit.images" et cela a fonctionné idk pourquoi mais je ne m'en soucie pas vraiment



0
votes

Essayez de définir une nouvelle propriété images: [] code> et utilisez-le pour la boucle au lieu de image dans le produit.Images code>. Par exemple, modifiez votre code comme:

data () {
  return {
    product: null,
    images: [],
    quantity: 1
  }
},
mounted() {
  axios.get('/api/products/' + this.$route.params.id)
    .then(response => {
      this.product = response.data.data;
      if (response.data.data.images) {
        // Check if images exist in response.data.data
        this.images = response.data.data.images
      }
    })
    .catch(error => {
      alert('Unable to fetch product.')
    });
}


0 commentaires