问题描述
日历小部件一开始可以工作,但如果您刷新页面,它就会停止工作,但只有在网站上线时才会停止工作。在本地开发中,不会出现这样的问题。
还注意到,当我通过导航路由到页面时,它可以工作。但是如果我直接输入特定页面的链接,就不行了。
代码如下:
<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。我将小部件设置为仅在客户端显示。不确定是什么问题。
解决方法
从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。
,有一种解决方案可以在不使用其小部件的情况下集成 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>