v-for with Carousel items


Topic: v-for with Carousel items

rscs pro premium priority asked 6 years ago

I am seeing the error 'Error in mounted hook: "TypeError: this.$slots.default is undefined, can't access property "forEach" of it"' when trying to use the Carousel component with v-for. Here's the code I'm using:
<carousel :interval="9999999999999" slide showControls>
   <carousel-item class="category" v-for="(category, index) in categories" :key="category.id">
      <div>
         <h3 class="centered">{{ category.name }}</h3>

         <div class="activity clickable" @click="clickActivity(activity.activityId)" v-bind:class="{ selected: selectedActivities.includes(activity.activityId) }" v-bind:data-id="activity.activityId" v-for="activity in category.activities">
            <img v-bind:alt="activity.name" v-bind:data-id="activity.activityId" v-bind:src="activity.activityId | activityImage" width="42" height="42"><br>{{ activity.name }}
         </div>
      </div>
   </carousel-item>
</carousel>

Jakub Strebeyko staff answered 6 years ago

Hi there rscs, Sorry for being so unhelpful, the code works fine on my end (when mocking a category data object and removing properties that are not present, like selectedActivities and activityImage filter). Does anyone else experience problems while using carousels with v-for on carousel-item? Best, Kuba
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Vue
  • MDB Version: 4.6.0
  • Device: Desktop
  • Browser: All Browsers
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No
Tags