Calendly 小部件在实时页面刷新后不起作用

Question

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

还注意到，当我通过导航路由到该页面时，它起作用了。但是如果我直接在特定页面输入link，就不行了。

代码如下：

    <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

从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 if you're interested into optimizing your loading time. If it's not that much needed, simply use the usual method or even simpler, load the vanilla JS solution 的精彩文章。

Answer 2

有一种解决方案可以在不使用其小部件的情况下集成 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>

Calendly 小部件在实时页面刷新后不起作用

Calendly widget doesn't work after page refresh when live

vue.js

server-side-rendering

gridsome

calendly