vue ：style 绑定内联样式问题

Question

<div class="refresh">
<i class="fa fa-refresh fa-lg" @click="random" :class="{'fa-spin':spin}" @mouseover="spin=true"@mouseout="spin=false"></i>
</div>
  <div class="photoBox" :style="{top:randomY[index]+'px', left:randomX[index]+'px', zIndex:photo.data.length-index, transform: 'rotate('+randomZ[index]+'deg)'}"v-for="(item, index) in photo.data" @mouseover="zIndex=index" @mouseout="zIndex=0" :class="{zIndex:zIndex==index}"><img :src="item.src" :title="item.title" alt="" @click="$preview.open(index, photo.data, options)":key="item"></div>
</div>

random () {
      this.photo.data.forEach((e, i) => {
        this.randomX[i] = Math.random() * 250
        this.randomY[i] = Math.random() * 250
        this.randomZ[i] = Math.random() * 90  - 45
        console.log(this.randomX[i])
      })
    }

点击刷新按钮的 时候执行random，且打印出this.randomX[i] 的值 但是 看vue的调试器randomX并没有变化 ，而移除 刷新按钮的时候 randomX变化 这是啥原因

Answer 1

多看看文档

由于 JavaScript 的限制， Vue 不能检测以下变动的数组：

1. 当你利用索引直接设置一个项时，例如： vm.items[indexOfItem] = newValue
2. 当你修改数组的长度时，例如： vm.items.length = newLength

链接描述