无法读取未定义的循环属性(vue.js)

Question

要解决的问题：

我有一个滑块，必须在幻灯片之间制作动画，而不仅仅是立即转到nex/prev。

方案：

(在问题结尾处，您会找到一个带有所有代码的小提琴(我的模板上有下一个结构(请查看小提琴以检查样式(：

<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>

和在我的脚本中，在MOATED((方法上，我定义了我需要的所有变量(包括幻灯片(：

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)';
        }
      }
    },
  },
})

问题是在sextslide((方法上，尽管我使用call((方法检查了变量，但抛出错误"无法读取属性。做错了吗？

如果您检查小提琴，在脚本的末尾是一个评论的代码的一部分，另一种解决方案会更改.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;
  }
}

更新了小提琴