我已经创建了一个用于Vue 3和TypeScript支持的自定义Flickity.vue对象,遵循接受的答案here。 但是,当我尝试侦听flickity carousel上的事件时,我被控制台中的运行时类型错误所困扰:this$refs.flickity.on is not a function 是什么原因导致我当前的方法中断? DisplayPage.vue <template>
<div class="row">
<div class="col d-block m-auto">
&l
我将我当前的网站转换为nuxtjs和vuejs页面。使用nuxt,我想做服务器端渲染。所以最后是一个静态的html页面。我的vue组件中的import语句有问题。因此,现在我将针对ssr优化我的导入。我目前的解决方案如下所示: let Flickity = {};
if (process.browser) {
Flickity = require('flickity');
} 在一个组件中,我使用了flickity滑块以及flickity-sync和flickity-fade插件。通常我只会添加导入状态,如下所示: let Flickity = {};
if
我试图破坏并重新加载我的Flickity幻灯片,同时使用Swup进行页面转换,但我没有太多的运气。这是我的js文件: import Swup from 'swup';
var Flickity = require('flickity');
function init() {
if (document.querySelector('.testimonials-slideshow')) {
var flkty = new Flickity('.testimonials-slideshow', {
wrap
Rails6、Webpacker和
快速演示应用:
尝试1:纯jQuery
TypeError: $(...).flickity is not a function
app/javascript/packs/application.js
require("@rails/ujs").start()
require("@rails/activestorage").start()
require("channels")
require("jquery")
require("flickity")
import "
我正在尝试使用具有点击功能的自定义按钮来移动到下一张幻灯片。我所做的和这个官方示例中的完全一样:https://codepen.io/desandro/pen/emVpdz 但是我总是从控制台得到这个错误: Uncaught TypeError: $(...).flickity is not a function 下面是我的代码: <script>
var $carousel = $('.main-carousel').flickity();
// previous
$('.button--previous').on( 'click
我已经阅读了关于堆栈溢出(其中有很多)这个主题的所有其他文章。但据我所知,它们都提供了相同的潜在修复,例如用if(process.client)包装代码,或者用<client-only>标记包装组件,以及在nuxt.config.js文件中的插件中添加mode:"client"或添加client后缀。不幸的是,这些解决方案对我都没有用。包文件(flickity.js)似乎仍在服务器端运行,导致错误。我尝试用require替换导入,并将其包装在if (process.client)条件中,但这也不起作用。如果不包括import Flickity from 'f