vue中我怎么再次获取到v-for的每一项数据做再次操作?

Question

问题描述

我这场景是几个圆围绕一个大圆拖动其中随便一个圆所有的圆都统一滚动360度,下面这段代码是算出了小圆的角度,但是我拖动事件触发只能操作其中一个小圆的滚动

问题出现的环境背景及自己尝试过哪些方法

问题是,我需要随便拖动哪个小圆它本身及其他圆都滚动360度,目前只实现了拖动哪个只滚动一个,我使用ref也操作过了获取不到,我目前的思路是怎么事件触发能获取它的属性然后改变就像下方代码拖动当前已经生效了

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

<ul class="menu">
      <v-touch v-for="(img,index) in imgDeg" :key="index" @swipeleft="swiperleft(img)"
        @swiperight="swiperright(img)" :style="{'transform': 'rotate(' + img.deg + 'deg)'}" tag="li">
        <div :style="{'backgroundColor': img.color,'transform': 'rotate(' + img.textDeg + 'deg)'}">{{img.img}}</div>
      </v-touch>
 </ul>
 
data () {
    return {
     imgs: ['助教','做客教授','教授','同系','同班','同楼','校友','朋友','校草','校花','论文导师',],
     imgDeg: [],
    }
  },
 methods: {
     swiperleft (img){
      console.log()
      img.deg = img.deg - 360;
    },
    swiperright (img){
      img.deg = img.deg + 360;
    }
},
mounted (){ 
  this.imgs.forEach((index,l) => {
      let deg = 360 / this.imgs.length;
      //console.log(deg);
      this.imgDeg.push({
        'img':index,
        'deg': deg * l,
        'color': 'rgb(' + this.randomFrom(43,161) + ',' + this.randomFrom(140,217) + ',' + this.randomFrom(155,190) + ')',
        'textDeg': (deg * l) - (deg * l * 2),
      })
    })
}

你期待的结果是什么？实际看到的错误信息又是什么？

事件触发,我怎么才能拿到它的每一项的数据,然后操作他们....

Answer 1

我解决了,直接操作原始数组:

swiperleft (){
  this.imgDeg.forEach(index => {
    index.deg = index.deg - 360;  
  })
},
swiperright (){
  this.imgDeg.forEach(index => {
    index.deg = index.deg + 360;  
  })
}