实时页面刷新后日历小部件不起作用

Question

calendly 小部件起初可以工作，但如果您刷新页面，它就会停止工作，但只有在网站上线时才会工作。在本地开发中，不会出现这样的问题。

还注意到，当我通过导航路由到页面时，它可以工作。但是如果我直接输入特定页面的链接，就不行了。

代码如下：

    <template>
  <client-only>
    <vue-calendly url="link" :height="650"></vue-calendly>
  </client-only>
</template>

<script>
import Vue from 'vue';

export default {
  created() {
    if (process.isClient) {
      const VueCalendly = require('vue-calendly').default;
      Vue.use(VueCalendly);
    }
  }
};
</script>

Vue 应用程序在 Gridsome 上运行，因此它是 SSR。我将小部件设置为仅在客户端显示。不知道是什么问题。

Answer 1

有一种解决方案可以在不使用其小部件的情况下集成 Calendly。你也可以试试。此解决方案不应产生上述错误，并已在 SSR 应用程序中尝试过。

<template>
  <!-- Calendly inline widget begin -->
  <div class="calendly-inline-widget" data-url="YOUR_CALENDLY_URL" style="min-width:320px;height:630px;"></div>
  <!-- Calendly inline widget end -->
</template>
    
<script>
export default {
  mounted () {
    const recaptchaScript = document.createElement('script')
    recaptchaScript.setAttribute('src', 'https://assets.calendly.com/assets/external/widget.js')
    document.head.appendChild(recaptchaScript)
  }
}
</script>

Answer 2

从this link，我们可以看到他正在导入组件

import Vue from 'vue';
import VueCalendly from 'vue-calendly';

Vue.use(VueCalendly);

然后用

<vue-calendly url="your Calendly URL" :height="600"></vue-calendly>

我不确定您是否在这里尝试使用像 es2020 import 这样的语法，但 require('vue-calendly').default 可能是这里的问题。

尝试按照上面建议的基本方式导入它，然后如果您愿意，以后可以对其进行一些延迟加载。

另外，您可以使用您的开发工具来查看为什么您的 Calendly 实例不存在。

---

如果您有兴趣优化加载时间，Addy Osmani 写了一篇关于如何import on interaction 的精彩文章。如果不需要太多，只需使用通常的方法或更简单的方法，load the vanilla JS solution。