[Vuejs]-Cannot read .style property of undefined on for loop (Vue.js)

by

2👍

✅

Vue handles the style attribute for things like this, so you shouldn’t be manipulating the DOM directly for that.

All the offsets are the same, so you can just make a computed at the Vue level and apply it to all of them:

  <li v-for="(slide, index) in slides" :key="index" class="slide" :style="transform">

The computed looks like this:

transform() {
  const amount = - this.count * this.sliderWidth;
  const transformArg = `translateX(${amount}px)`;

    return {transform: transformArg};
}

And your nextSlide is just:

nextSlide() {
  if (this.count < (this.items-1)) {
    this.count = this.count + 1;
  } else {
    this.count = 0;
  }
}

Updated fiddle

👤Roy J

Leave a comment