使用vue-image-lightbox实现轮播图图片src动态修改的问题咨询

你出现这个问题的核心原因是：
data 初始化时，media 数组里的 src 和 thumb 是直接读取当时的 this.post_main_image_url 的值（空字符串），由于字符串是基础类型，赋值时是值拷贝而非引用传递。后续你修改 post_main_image_url 时，media 数组里的对应属性不会自动同步更新，所以组件拿到的始终是初始的空值，显示为 undefined。

最优解决方法：把 media 改为计算属性 #

利用 Vue 的响应式依赖机制，post_main_image_url 变化时 media 会自动更新，无需手动赋值：

export default {
  name: 'lightbox',
  components: {
    ImageLightBox,
  },
  data() {
    return {
      post: {
        // 提前声明属性避免响应式丢失
        main_image_url: ''
      },
      post_main_image_url: '',
    }
  },
  computed: {
    media() {
      return [
        {
          thumb: this.post_main_image_url,
          src: this.post_main_image_url,
          title: '朝日が昇る摩周湖（北海道川上郡弟子屈町）',
        }
      ]
    }
  },
  methods: {
    show: function(index){
      this.$refs.lightbox.showImage(index)
    },
    getData() {
      this.$loading.load(
          this.$auth.api.get(
              'posts/' + this.post_id, {
                params: {}
              }
          ).then(res => {
            this.post = res.data.post;
            this.post_main_image_url = String(res.data.post.main_image_url)
          }).catch(err => {
            this.$errorHandlers.initial(err);
          })
      )
    }
  },
  created() {
    this.getData();
  },
}

替代方案：手动更新media #

如果你不想改动原有 data 结构，也可以在接口拿到返回值后手动修改 media 的属性：

// 在 getData 的 then 回调中，赋值 post_main_image_url 后新增两行代码
this.post_main_image_url = stringMainImageUrl
this.media[0].src = this.post_main_image_url
this.media[0].thumb = this.post_main_image_url

内容的提问来源于stack exchange，提问作者katahik