实时页面刷新后，日历小部件无法工作

Question

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

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

这是代码：

    <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 小部件的情况下集成 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>