鍍金池/ 問答/HTML5  HTML/ vue中我怎么再次獲取到v-for的每一項(xiàng)數(shù)據(jù)做再次操作?

vue中我怎么再次獲取到v-for的每一項(xiàng)數(shù)據(jù)做再次操作?

問題描述

我這場景是幾個(gè)圓圍繞一個(gè)大圓拖動(dòng)其中隨便一個(gè)圓所有的圓都統(tǒng)一滾動(dòng)360度,下面這段代碼是算出了小圓的角度,但是我拖動(dòng)事件觸發(fā)只能操作其中一個(gè)小圓的滾動(dòng)

問題出現(xiàn)的環(huán)境背景及自己嘗試過哪些方法

問題是,我需要隨便拖動(dòng)哪個(gè)小圓它本身及其他圓都滾動(dòng)360度,目前只實(shí)現(xiàn)了拖動(dòng)哪個(gè)只滾動(dòng)一個(gè),我使用ref也操作過了獲取不到,我目前的思路是怎么事件觸發(fā)能獲取它的屬性然后改變就像下方代碼拖動(dòng)當(dāng)前已經(jīng)生效了

相關(guān)代碼

// 請把代碼文本粘貼到下方（請勿用圖片代替代碼）

<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: ['助教','做客教授','教授','同系','同班','同樓','校友','朋友','校草','?；?,'論文導(dǎo)師',],
     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),
      })
    })
}

你期待的結(jié)果是什么？實(shí)際看到的錯(cuò)誤信息又是什么？

事件觸發(fā),我怎么才能拿到它的每一項(xiàng)的數(shù)據(jù),然后操作他們....

回答
編輯回答
旖襯

我解決了,直接操作原始數(shù)組:

swiperleft (){
  this.imgDeg.forEach(index => {
    index.deg = index.deg - 360;  
  })
},
swiperright (){
  this.imgDeg.forEach(index => {
    index.deg = index.deg + 360;  
  })
}
2017年5月12日 10:24