Vue.js w Webpack：owl.carousel 不显示

Question

我正在尝试用一个简单的实现来测试 owl-carousel

我已经添加到我的 webpack.dev 配置中

new webpack.ProvidePlugin({
  $: 'jquery',
  jquery: 'jquery',
  jQuery: 'jquery',
  'window.jQuery': 'jquery'
})

和我的 HelloWorld.vue 合并测试

    <template>
      <div class="hello">
          <h2>Test owl carousel</h2>
              <div class="row">
                <div class="col-sm-12 col-sm-offset-3">
                  <div class="owl-carousel owl-theme">
                    <div class="item">
                      <img src="http://placehold.it/300x150&text=Image1">
                    </div>
                  <div class="item">
                    <img src="http://placehold.it/300x150&text=Image2">
                  </div>
                  <div class="item">
                    <img src="http://placehold.it/300x150&text=Image3">
                  </div>
                  <div class="item">
                    <img src="http://placehold.it/300x150&text=Image4">
                  </div>
                  <div class="item">
                    <img src="http://placehold.it/300x150&text=Image5">
                  </div> -->
                </div>
              </div>
            </div>
      </div>
    </template>

<script>
import 'owl.carousel/dist/owl.carousel.min.js'
import 'owl.carousel/dist/assets/owl.carousel.min.css'
import 'owl.carousel/dist/assets/owl.theme.default.min.css'

export default {
  name: 'HelloWorld',
  methods: {
    installOwlCarousel: function () {
      $('.owl-carousel').owlCarousel({ items: 4, loop: true, margin: 10 })
    },
    mounted: function () {
      this.$nextTick(function () {
        this.installOwlCarousel()
      })
    }
  }
}
</script>

但是即使 html 包含 owl carousel ，它也不会显示（ display: 设置为 none ...控制台中没有错误..

我哪里错了？感谢反馈和技巧......

Answer 1

已解决...键入错误挂载不应该嵌入到方法中！！

 methods: {
    installOwlCarousel: function () {
      $('.owl-carousel').owlCarousel({ items: 4, loop: true, margin: 10 })
    }
  },
  mounted: function () {
    this.$nextTick(function () {
    this.installOwlCarousel()
    })
  }