物化 css 触发器在 Vue js 中不起作用答案

【问题标题】：Materialize css triggers are not working in Vue js物化 css 触发器在 Vue js 中不起作用
【发布时间】：2019-08-04 05:09:09
【问题描述】：

我在我的 Vue js 项目中使用 Materialize CSS 的 Carousel 元素。当我路由到具有 carousel 元素的 vue 实例时，它不会显示 carousel 元素。当我刷新页面时，它会显示轮播元素。我尝试了所有 vue 实例生命周期钩子，但它不起作用。解决办法是什么？

请注意，我在 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>

【问题讨论】：

标签： javascript css vue.js materialize addeventlistener

【解决方案1】：

不要使用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 和 import M from 'materialize-css' 下载脚本。

【讨论】：