vuejs3 - Vue 3 Carousel Uncaught TypeError: Cannot read properties of null (reading 'refs') within ES module - S

admin管理员组

文章数量:1418680

This is a follow up question to my previous question here Vue3 Carousel as ES module in Laravel blade template

I am using Vue 3 Carousel as an ES module to separate my components buit I'

Uncaught TypeError: Cannot read properties of null (reading 'refs') at Er (vue.esm-browser.prod.js:1:42975)

What am I doing wrong or missing in my code?

This is my javascript module:

import { Carousel, Slide } from '/[email protected]/+esm'

export default {
  props: {
    releases: {
      type: Array,
      required: true
    }
  },
  setup(props) {
    const carouselConfig = {
      wrapAround: true,
      itemsToShow: 3,
      snapAlign: 'center',
      autoplay: 2000,
      breakpoints: {
        600: {
          itemsToShow: 1,
          snapAlign: 'start'
        },
        1000: {
          itemsToShow: 2,
          snapAlign: 'start'
        },
        1200: {
          itemsToShow: 3,
          snapAlign: 'start'
        }
      }
    }

    return { carouselConfig, releases: props.releases }
  },
  components: {
    Carousel,
    Slide
  }
}

and here is my html page with the template code

<div id="release-carousel">
  <Carousel v-bind="carouselConfig">
    <Slide v-for="(item, index) in releases" :key="index">
      <div class="text-center p-2 bg-white">
        <div class="mb-4">
          <a :href="'/releases/' + item.encoded_id + '/' + item.name_slug + '/' + item.title_slug">
            <picture>
              <source :srcset="'/images/releases/thumbs/' + item.filename + '.webp'" type="image/webp" />
              <source :srcset="'/images/releases/thumbs/' + item.filename + '.jpg'" type="image/jpeg" />
              <img
                class="mx-auto img-fluid p-1 lazy"
                :data-src="'/images/releases/thumbs/' + item.filename + '.jpg'"
                :alt="item.name + ' - ' + item.title"
                width="300"
                height="300"
              />
            </picture>
          </a>
        </div>
      </div>
    </Slide>
  </Carousel>
</div>

@push('css')
<link rel="stylesheet" href="{{ asset('css/carousel.css') }}">
@endpush

@push('scripts')
<script type="module">
  import { createApp } from 'vue'
  import ReleaseCarousel from '/js/release-carousel.js'

  const releasesData = @json($releases);

  createApp(ReleaseCarousel, { releases: releasesData }).mount('#release-carousel')
</script>
@endpush

本文标签：