在激活页面刷新后，Calendly小部件无法工作

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

从此链接中，我们可以看到他是用

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

Vue.use(VueCalendly);

然后用

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

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

试着像上面建议的那样以基本的方式导入它，然后如果您愿意的话，您可以在以后对它进行一些延迟加载。

此外，您也可以使用devtools来了解为什么Calendly实例不存在。

Addy做了一篇很棒的文章，如果您对优化加载时间感兴趣，那么如何使用导入交互作用。如果没有那么多的需求，只需使用通常的方法，甚至更简单的加载香草JS解决方案。