Применение стиля каждому отдельному элементку списка vue

Question

Как реализовать применение стиля каждому элементу, создаваемому с помощью v-for, отдельно?

<div class="circle" v-for='circle in circles' :style="{left:x+'px'}" :key="circle"></div>

При кликах кнопку увеличивается x. Таким образом мне нужно чтобы элементы располагались каждый по своему значению, а не смещались все куче при каждом клике, так как стиль в данном коде применяется всем.

Answer 1

Получилось реализовать вот так:

<div class="circle" v-for='(circle, index) in circles' :style="{left:x[index]+'px'}" :key="index"></div>

Где x - созданный массив с данными для каждого элемента

Спасибо Рустам Гимранов

Answer 2

Я вот так понял задание.))) Если кликать по кругу, то стиль left изменяется.
)))))

Vue.component("CircleChild", {
  props: {
  
  },
  data() {
    return {
      countClick: 0,
    }
  },
  computed: {
    style() {
      return {
        left: `${ this.countClick * 3 }px`,
      };
    },
  },
  methods: {
    clickMe() {
      this.countClick++;
    },
  },
  template: `<div><button type="button" class="circle" :style="style" @click="clickMe"></button></div>`,
})

new Vue({
  el: '#app',
  template: `
    <div class="position-relative">
     <circle-child v-for="circle in circles" :key="circle"></circle-child> 
    </div>
  `,
  data() {
    return {
      circles: [
        "aloha0",
        "aloha1",
        "aloha2",
        "aloha3",
        "aloha4"
      ],
    };
  },
})

.position-relative {
  position: relative;
  height: 400px;
  width: 400px;
  background-color: grey;
}

.circle {
  position: relative;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  background-color: red;
  left: 0px;
  border: 1px solid;
}
.circle:focus {
  outline: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app"></div>

БЛОГ НА HUSL

Применение стиля каждому отдельному элементку списка vue

Ответы (2 шт):