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包含猫头鹰轮播，它也不会显示（显示：设置为无......控制台中没有错误..

我错在哪里？ thnaks的反馈和技巧......

Answer 1

解决了...打字错误安装不应该嵌入方法!!

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

Vue.js w Webpack：owl.carousel没有显示

1 个答案: