1
votes

Erreur VanillaJS à VueJS: mauvais élément pour Flickity: carrousel

J'essaie de faire fonctionner cet exemple Flickity (CodePen) dans un VueJS composant.

HTML

  mounted () {
    flkty.on('dragStart', function () {
      this.stageDragging = true
      console.log('stageDragging: ' + this.stageDragging)
    })
    flkty.on('dragEnd', function () {
      this.stageDragging = false
      console.log('stageDragging: ' + this.stageDragging)
    })

import Flickity from 'flickity'
var flkty = new Flickity('.carousel')
export default {
  data () {
    return {
      flickityOptions: {
        dragThreshold: 50,
        initialIndex: 1,
        prevNextButtons: false,
        pageDots: false,
        wrapAround: false,
        hash: true,
        percentPosition: false
      },

J'obtiens cette erreur:

mauvais élément pour Flickity: carrousel

Ma version ne fonctionne pas :

Données JS ()

 var flkty = new Flickity('.carousel');

    flkty.on( 'dragStart', function() {
      console.log('dragStart');
    });

JS monté ()

<div class="carousel">
  <div class="carousel-cell"></div>
  <div class="carousel-cell"></div>
  <div class="carousel-cell"></div>
  <div class="carousel-cell"></div>
  <div class="carousel-cell"></div>
</div>

Comment utiliser cet exemple Flickity dans un composant VueJS?

javascript vue.js vuejs2 flickity

1 commentaires

Vous devrez probablement envisager d'utiliser ref pour accéder à l'élément / composant respectif ou au minimum créer une instance de Flickity dans un hook de cycle de vie tel que monté () lorsque l'élément est réellement disponible dans le DOM. Cela étant dit, il existe des bibliothèques / composants conçus pour Vue qui utilisent Flickity.

3 Réponses :

2
votes

<link href="https://npmcdn.com/flickity@2/dist/flickity.css" rel="stylesheet"/>
<script src="https://npmcdn.com/flickity@2/dist/flickity.pkgd.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div class="carousel">
    <div v-for="item in itemsCount" class="carousel-cell">{{ item }}</div>
  </div>
</div>

* { box-sizing: border-box; }

body { font-family: sans-serif; }

.carousel {
  background: #FAFAFA;
}

.carousel-cell {
  width: 66%;
  height: 200px;
  margin-right: 10px;
  background: #8C8;
  border-radius: 5px;
  counter-increment: carousel-cell;
}

.carousel-cell:before {
  display: block;
  text-align: center;
  content: counter(carousel-cell);
  line-height: 200px;
  font-size: 80px;
  color: white;
}

var app = new Vue({
  el: '#app',
  data() {
    return {
      options: {
        dragThreshold: 50,
        initialIndex: 1,
        prevNextButtons: false,
        pageDots: false,
        wrapAround: false,
        hash: true,
        percentPosition: false,
      },
      itemsCount: 5,
      flkty: null,
    }
  },
  mounted: function () {
    this.flkty = new Flickity(`#${this.$el.id} .carousel`);
    this.flkty.on( 'dragStart', function() {
      console.log('dragStart');
    });
  }
})

Vue.config.devtools = false;
Vue.config.productionTip = false;

0 commentaires

2
votes

Dans votre section , le JavaScript s'exécute avant que le modèle n'ait été rendu dans le document, donc Flickity ne pourrait pas trouver .carousel s'il est appelé à l'extérieur d'un crochet. Les instances Vue ont un monté () hook de cycle de vie qui est appelé lorsque son modèle est rendu, c'est là que vous devez créer le carrousel Flickity:

// template
<div ref="carousel">

// script
new Flickity(this.$refs.carousel)

Aussi, au lieu de passer le nom de classe .carousel à Flickity, passez un ref à l'élément .carousel dans afin d'éviter de saisir un élément .carousel inattendu dans le document (par exemple, si vous aviez plusieurs instances de composant).

// const flkty = new Flickity(...) // DON'T DO THIS HERE
export default {
  mounted() {
    this.$nextTick(() => {
      const flkty = new Flickity(...)
      // ...
    });
  }
}

démo

0 commentaires

0
votes

Cas spécifique de Rails:

l'invite d'erreur car j'ai eu une double fois la balise de script CDN et le code JS sur mon Javascript / Packs sur le même layout.html.erb

<%= javascript_pack_tag 'flickity' %>
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>

0 commentaires