0

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

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

这是代码：

    <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。我将小部件设置为仅在客户端显示。不确定是什么问题。

4

2 回答 2

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>
于 2021-02-22T19:10:40.840 回答
0

从这个链接中，我们可以看到他正在导入组件

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 写了一篇关于如何导入交互的精彩文章。如果不需要太多，只需使用通常的方法，甚至更简单，加载 vanilla JS 解决方案。

于 2021-02-22T17:08:22.373 回答