我在我的 Vue js 元素中使用 Materialise CSS 的 Carousel 元素。当我路由到具有轮播元素的 vue 实例时,它不显示轮播元素。当我刷新 页面时,它会显示轮播元素。我尝试了所有 vue 实例生命周期 Hook ,但它不起作用。解决方案是什么?
请注意,我在 index.html 中包含了编译和压缩的 CSS 和 Javascript。
<template>
<div class="carousel">
<a class="carousel-item" href="#one!">1</a>
<a class="carousel-item" href="#two!">2</a>
<a class="carousel-item" href="#three!">3</a>
<a class="carousel-item" href="#four!">4</a>
<a class="carousel-item" href="#five!">5</a>
</div>
</template>
<script>
export default {
name: 'Home',
created() {
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.carousel');
var instances = M.Carousel.init(elems, {
fullWidth: true,
indicators: true
});
});
}
}
</script>
最佳答案
不要使用 DOMContentLoaded
事件。由于这个原因,Vue 已经有了生命周期方法。
export default {
name: 'Home',
mounted() {
var elems = document.querySelectorAll('.carousel');
var instances = M.Carousel.init(elems, {
fullWidth: true,
indicators: true
});
}
};
如果你只使用脚本标签,你还需要定义M
//vue.config.js
module.exports = {
chainWebpack: config => {
config.externals({
'M'
})
}
}
或从 npm 下载脚本并从“materialize-css”导入 M
。
关于javascript - Materialize css 触发器在 Vue js 中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57343987/