如何在Vue2.js中初始化Flickity？当前需手动在Chrome控制台初始化

Hey Carlos, let's break down why Flickity isn't auto-initializing for you and fix it up. The core issue here is timing—Flickity's auto-initialization runs when its script loads, but your Vue component's carousel DOM doesn't exist yet at that point.

You're using the defer attribute on your Flickity script tag, which makes it execute after the initial DOM is parsed. But Vue components render their DOM dynamically, long after that initial DOM load. When Flickity scans the page for elements with data-flickity, your carousel div hasn't been mounted by Vue yet—so it doesn't find anything to initialize.

Recommended Solution: Manual Initialization in Vue's Lifecycle Hook #

The most reliable fix is to initialize Flickity explicitly once your Vue component's DOM is ready. Here's how to do it:

1. Add a ref to your carousel element so you can easily access it in your component code:

<template>
  <div class="carousel" ref="flickityCarousel">
    <div class="carousel-cell"></div>
    <div class="carousel-cell"></div>
    <div class="carousel-cell"></div>
  </div>
</template>

2. Initialize Flickity in the mounted hook (this is when your component's DOM is fully mounted to the page):

<script>
export default {
  data() {
    return {
      flickityInstance: null
    };
  },
  mounted() {
    // Make sure Flickity is loaded before initializing
    if (window.Flickity) {
      this.flickityInstance = new Flickity(this.$refs.flickityCarousel, {
        autoPlay: true,
        // Add any other Flickity options you need here
      });
    }
  },
  beforeUnmount() {
    // Clean up the instance to prevent memory leaks
    if (this.flickityInstance) {
      this.flickityInstance.destroy();
    }
  }
};
</script>

Why this works: #

• The mounted hook fires only after your component's HTML is inserted into the page, so Flickity will always find the carousel element.
• We store the instance in data so we can destroy it when the component unmounts, which prevents memory leaks (super important for single-page apps!).

Alternative: Trigger Auto-Initialization After Vue Mounts #

If you still want to use the data-flickity attribute for configuration, you can manually tell Flickity to scan for elements again after your component mounts:

<script>
export default {
  mounted() {
    if (window.Flickity) {
      // Find all elements with data-flickity and initialize them (if not already done)
      document.querySelectorAll('[data-flickity]').forEach(element => {
        if (!Flickity.data(element)) {
          new Flickity(element);
        }
      });
    }
  }
};
</script>

Note on the defer attribute: #

You can keep the defer attribute on your Flickity script tag—it's still helpful for loading the script without blocking the initial page render. The key fix is ensuring Flickity runs its initialization after Vue has rendered your carousel.

内容的提问来源于stack exchange，提问作者Carlos Uriel Santiago