[Vuejs]-Data variable undefined in computed function

by

0👍

It’s difficul to understand your issue without more data.
How many item there is in ‘{{photos}} ? for instance. You say that "…{ photos[2].photos }} is also undefined, but {{photos}} isn’t…" => this should means that {{photos}} hold less then 3 items, or that the 3th element of {{photos}} is undefined.

=> Could you please provide us with the content of {{photos}} ?

In addition, I guess that there is another bug in your code:
in your template you have

<CoolLightBox :items="gallery" :index="index" @close="index = null">
</CoolLightBox>

but gallery is not define in your scrip section, instead you define galleryPhoto which return an object whish has the gallery attribut:

   galleryPhoto: function() {
      return {
        gallery: [
          {
            src: `${this.photos[2].photos}`
          }
        ]
      };
    }

=> So either you modify your template to refer to galleryPhoto.gallery:

<CoolLightBox :items="galleryPhoto.gallery" :index="index" @close="index = null">
</CoolLightBox>

or a better solution is to modify the computed property:

  computed: {
    gallery() {
      return [
          {
            src: this.photos[2].photos
          }
        ];
    }
  },

Or if you want to display all the photos:

  computed: {
    gallery() {
      return !Array.isArray(this.photos) ? [] : this.photos.map(el => el?.photos);
    }
  },

Leave a comment