时间戳

首页 > 解决方案 > Vuejs 通过使用计算工作，但不能使用 heroku 上的数据工作

javascript - Vuejs 通过使用计算工作，但不能使用 heroku 上的数据工作

问题描述

我的 vue 页面正在加载一个嵌入 wistia 视频，视频 url 是一个 ENV 变量。当我将视频 url 分配给 vue 数据属性时，它不起作用，因为我可以看到安装时 url 值未定义。

  data: function () {
    return {
      videoUrl: process.env.VUE_APP_VIDEO_URL,
    }
  },

  mounted() {
    console.log(`video url: ${this.videoUrl}`);
  },

但是，如果我将视频链接分配给计算属性，它将正常工作。

computed: {
  videoUrl() {
    return process.env.VUE_APP_VIDEO_URL;
  }
}

<div class="wistia_responsive_padding" style="padding:55.94% 0 0 0;position:relative;" v-if="videoUrl">
    <div class="wistia_responsive_wrapper" style="height:100%;left:0;position:absolute;top:0;width:100%;">
        <iframe :src="videoUrl" title="Welcome Video" allow="autoplay; fullscreen" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" allowfullscreen msallowfullscreen width="100%" height="100%"></iframe>
    </div>
</div>

我猜 vue 数据是很早就被评估的，但它是否早于 ENV 变量被加载？有人可以解释一下吗？

注意：仅当我将应用程序部署到 heroku 时才会出现此问题。

标签： javascriptvue.jsvuejs3computed-properties

解决方案

你总是可以做这样的事情：

{  
    data () {
        return {
            videoUrl: '',
        }
    },
    mounted() {
        this.videoUrl = process.env.VUE_APP_VIDEO_URL
    }
}

推荐阅读