v-for with Carousel items

Topic: v-for with Carousel items

rscs priority asked 5 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>

Add comment

Jakub Strebeyko staff answered 5 years ago

0 0 Best answer

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

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

ForumUser: Priority
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

rscs

20Support score
5Questions 0Answers 0Snippets