javascript - 无法读取 for 循环中未定义的 .style 属性(Vue.js)

Question

要解决的问题:

我有一个 slider ，它必须在幻灯片之间制作动画，而不仅仅是立即转到下一张/上一张。

场景:

(您会在问题末尾找到包含所有代码的 fiddle ) 我的模板上有下一个结构(请查看 fiddle 以检查样式):

<div id="app">
  <div id="slider">
    <ul id="slide-wrap" @click="nextSlide" @click.middle="prevSlide">
      <li v-for="(slide, index) in slides" :key="index" class="slide">
        <div class="content">
          {{slide.id}}
        </div>
      </li>
    </ul>
  </div>
</div>

在我的脚本中，在 Mounted() 方法中，我定义了我需要的所有变量(包括幻灯片):

new Vue({
  el: '#app',
  mounted() {
    const thiss = this;
    this.sliderWidth = document.getElementById('slider').offsetWidth;
    this.sliderList = document.getElementById('slide-wrap');
    this.slider = document.getElementById('slider');
    this.slide = document.querySelectorAll('.slide');
    window.addEventListener('resize', () => {
      thiss.sliderWidth = document.getElementById('slider').offsetWidth;
    });
  },
  data() {
    return {
      slider: '',
      sliderList: '',
      slide: null,
      count: 0,
      sliderWidth: 0,
      slides: [
        {
          id: 1,
        },
        {
          id: 2,
        },
        {
          id: 3,
        },
        {
          id: 4,
        },
      ],
    };
  },
  computed: {
    items() {
      return this.slides.length;
    },
  },
  methods: {
    call() {
      console.log(this.slide);
    },
    nextSlide() {
      if (this.count < (this.items-1)) {
        this.count = this.count + 1;
        for (let i = 0; i < this.items; i++ ) {
          this.slide[i].style.transform = 'translateX(- + this.count * this.sliderWidth +px)';
        }
      } else {
        this.count = 0;
        for (let i = 0; i < this.items; i++ ) {
          this.slide[i].style.transform = 'translateX(- + this.count * this.sliderWidth +px)';
        }
      }
    },
  },
})

问题出在 nextSlide() 方法上，它抛出错误“无法读取未定义的属性.style”，尽管我使用 call() 方法检查了变量并且它返回了 dom 上的元素，我是什么做错了吗？

如果您检查 fiddle ，脚本末尾是一大块注释代码，其中包含另一个更改 .slide-wrap 元素位置的解决方案，但我需要新的解决方案来修改 translateX(X ) 每个 .slide 元素的属性

https://jsfiddle.net/carlosPisarello/hc3rz5g4/10/

Answer 1

Vue 处理诸如此类的 style 属性，因此您不应该为此直接操作 DOM。

所有偏移量都是相同的，因此您可以在 Vue 级别进行计算并将其应用于所有偏移量:

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

计算结果如下:

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

    return {transform: transformArg};
}

你的下一张幻灯片就是:

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

Updated fiddle