Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Flickity + Typescript Errors: Bad Element for Flickity: .carousel #68

Closed
CodyEddings opened this issue Jun 29, 2021 · 1 comment
Closed

Comments

@CodyEddings
Copy link

CodyEddings commented Jun 29, 2021

I've been working with Flickity in my Vue 3 app and it works fine when I use a hardcoded HTML carousel with static cells. I need to add cells programmatically at runtime, however, and I can't get the flickity API to work correctly.

I'm trying to follow the append() example but I get the error flickity.js?1385:72 Bad element for Flickity: .carousel in my inspector during runtime. I tried to follow the solution here and here but neither have been able to run successfully, it looks like its due to Typescript errors on the Flickity lib. I also installed @types/flickity, fyi.

What can I do to fix my append logic below?

<template>
        <div class="row">
          <div class="col d-block m-auto payment-option">
            <flickity ref="carousel" :options="flickityOptions">
            </flickity>
          </div>
      </div>
</template>

<script lang="ts">
import {defineComponent} from "vue";
//import Flickity from 'vue-flickity/src/flickity.vue';
import Flickity from 'flickity'
export default defineComponent({
  name: "PageName",
  components: {
    Flickity
  },
  data() {
    return {
      flickityOptions: {
        initialIndex: 3,
        prevNextButtons: false,
        pageDots: true,
        wrapAround: true
      }
    };
  },
  methods: {
    createBankAccountCarousel(flkty: Flickity) {
      flkty.append(this.makeFlickityCell())
    },
    makeFlickityCell() {
      const cell = document.createElement('div');
      cell.className = 'carousel-cell'
      cell.textContent = "Hi"
      return cell
    }
  },
  mounted() {
    let flkty = new Flickity(this.$refs.carousel)
    this.createBankAccountCarousel(flkty)
  }
});
</script>
@CodyEddings
Copy link
Author

Fixed using the Typescript - Vue 3 Flickity solution here

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant