计算函数中未定义的数据变量

Question

我正在尝试使用API端点中的照片来为lightbox加载一个映像src。this.photos存储了我所有的对象，但是我正在寻找这个url，它变成了“the .Phoosx.相册”。

在图片库中，我试图将${this.photos[x].photos作为src属性的字符串加载，但是我一直收到一个错误，即“照片是未定义的”

我测试了照片对象不是空的，并得到了一个对象的"http://localhost:8000/media/uploads/1_082720_soylent_PDPwebsite_PowderPouchCacao_1468x1100_A01-PouchShot_2048x2048.jpg“。

有时，如果我刷新页面，{光子2.照片}}也是未定义的，但{照片}不是，也许我应该使用与fetchPhotos挂载不同的生命周期钩子？

谢谢!

是存储在this.photos中的许多照片对象之一。为了获得src的图像，我将其命名为.apos2.。

 {
        "id": 3,
        "photos": "http://localhost:8000/media/uploads/1_082720_soylent_PDPwebsite_PowderPouchCacao_1468x1100_A01-PouchShot_2048x2048.jpg",
        "user": null
    },

<template>
  <div id="app">
    <CoolLightBox :items="gallery" :index="index" @close="index = null">
    </CoolLightBox>

    <div class="images-wrapper">
      <div
        class="image"
        v-for="(image, imageIndex) in items"
        :key="imageIndex"
        @click="index = imageIndex"
        :style="{ backgroundImage: 'url(' + image + ')' }"
      ></div>
    </div>
    {{ photos[2].photos }}
  </div>
</template>

<script>
import CoolLightBox from "vue-cool-lightbox";
import "vue-cool-lightbox/dist/vue-cool-lightbox.min.css";

export default {
  name: "app",
  data: function() {
    return {
      photos: [],
      index: null
    };
  },
  computed: {
    galleryPhoto: function() {
      return {
        gallery: [
          {
            src: `${this.photos[2].photos}`
          }
        ]
      };
    }
  },
  components: {
    CoolLightBox
  },
  mounted() {
    this.fetchPhotos();
  },
  methods: {
    setIndex(index) {
      this.index = index;
    },

    fetchPhotos($axios) {
      this.$axios
        .get("/api/v1/photos/")
        .then(response => {
          // console.log(response, "response");
          this.photos = response.data;
        })
        .catch(error => {
          console.log(error);
        });
    }
  }
};
</script>

Answer 1

如果没有更多的数据，就很难理解你的问题。{{照片}中有多少项？例如。您说“.{照片2.照片}也是未定义的，但{{照片}不是.”=> --这应该意味着{{照片}持有少于3项，或者{照片}}的第3元素未定义。

=>，你能提供{{照片}的内容吗？

此外，我猜您的代码中还有另一个bug :在您的模板中

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

但是图库不是在你的图片集部分中定义的，而是定义了galleryPhoto，它返回一个对象，当有图片库的时候：

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

=>，所以要么修改模板以引用galleryPhoto.gallery：

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

或者更好的解决方案是修改计算的属性：

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

或者如果您想显示所有的照片：

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