VanillaJS to VueJS Ошибка: плохой элемент для Flickity: карусель - PullRequest
Новая
       13

VanillaJS to VueJS Ошибка: плохой элемент для Flickity: карусель

0 голосов
/ 01 февраля 2019

Я пытаюсь заставить этот пример Flickity (CodePen) работать в компоненте VueJS.

HTML 

<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>

JS 

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

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

Я получаю эту ошибку:

плохой элемент для Flickity: carousel

My не работает версия:

Данные JS () 

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
      },

Установлены JS () 

  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)
    })

Какиспользовать этот пример Flickity в компоненте VueJS?

Ответы [ 3 ]

0 голосов
/ 02 февраля 2019

В вашем разделе <script> JavaScript выполняется до того, как шаблон будет отображен в документе, поэтому Flickity не сможет найти .carousel при вызове вне ловушки.Экземпляры Vue имеют mounted() ловушку жизненного цикла , которая вызывается при визуализации его шаблона, и именно здесь вы должны создать карусель Flickity: 

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

Кроме того, вместо передачи .carousel имя класса для Flickity, передайте ref элементу .carousel, чтобы избежать захвата неожиданного элемента .carousel в документе (например, если у вас было несколько экземпляров компонента). 

// template
<div ref="carousel">

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

демо

0 голосов
/ 26 апреля 2019

Конкретный регистр Rails:

Подсказка об ошибке, потому что у меня дважды был тег сценария CDN и код JS на моем Javascript/Packs на одном и том же layout.html.erb

<%= javascript_pack_tag 'flickity' %>
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
0 голосов
/ 02 февраля 2019 

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;
* { 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;
}
<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>
...