VanillaJS to VueJS Error: bad element for Flickity: carousel
VanillaJS to VueJS Error: bad element for Flickity: carousel
我正在尝试让 this Flickity example (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');
});
我收到这个错误:
bad element for Flickity: carousel
我的不工作版本:
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)
})
如何在 VueJS 组件中使用 this Flickity example?
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>
在您的 <script>
部分,JavaScript 在模板在文档中呈现之前执行,因此如果在挂钩之外调用,Flickity 将无法找到 .carousel
. Vue 实例有一个 mounted()
lifecycle hook ,当它的模板呈现时被调用,这是你应该创建 Flickity 轮播的地方:
// const flkty = new Flickity(...) // DON'T DO THIS HERE
export default {
mounted() {
this.$nextTick(() => {
const flkty = new Flickity(...)
// ...
});
}
}
此外,不要将 .carousel
类名传递给 Flickity,而是将 ref
传递给 .carousel
元素以避免在文档(例如,如果您有多个组件实例)。
// template
<div ref="carousel">
// script
new Flickity(this.$refs.carousel)
具体 Rails 案例:
错误提示是因为我在同一个layout.html.erb
上的Javascript/Packs
上有两次CDN脚本标签和JS代码
<%= javascript_pack_tag 'flickity' %>
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>
我正在尝试让 this Flickity example (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');
});
我收到这个错误:
bad element for Flickity: carousel
我的不工作版本:
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)
})
如何在 VueJS 组件中使用 this Flickity example?
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>
在您的 <script>
部分,JavaScript 在模板在文档中呈现之前执行,因此如果在挂钩之外调用,Flickity 将无法找到 .carousel
. Vue 实例有一个 mounted()
lifecycle hook ,当它的模板呈现时被调用,这是你应该创建 Flickity 轮播的地方:
// const flkty = new Flickity(...) // DON'T DO THIS HERE
export default {
mounted() {
this.$nextTick(() => {
const flkty = new Flickity(...)
// ...
});
}
}
此外,不要将 .carousel
类名传递给 Flickity,而是将 ref
传递给 .carousel
元素以避免在文档(例如,如果您有多个组件实例)。
// template
<div ref="carousel">
// script
new Flickity(this.$refs.carousel)
具体 Rails 案例:
错误提示是因为我在同一个layout.html.erb
Javascript/Packs
上有两次CDN脚本标签和JS代码
<%= javascript_pack_tag 'flickity' %>
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>