在v-for循环中记住上载时的图像位置

<template>
  <div>
    <div v-for="(image, index) in imagesWithPosition" :key="index">
      <img :src="image.src" :style="{ top: image.position.top, left: image.position.left }" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        { src: 'image1.jpg', position: { top: '0px', left: '0px' } },
        { src: 'image2.jpg', position: { top: '10px', left: '10px' } },
        // 更多图像...
      ],
    };
  },
  computed: {
    imagesWithPosition() {
      return this.images.map((image) => ({
        ...image,
        position: this.calculatePosition(image),
      }));
    },
  },
  methods: {
    calculatePosition(image) {
      // 这里可以根据图像的某些属性来计算位置
      return image.position;
    },
  },
};
</script>

this.$set(this.images[index], 'position', newPosition);
// 或者
this.images.splice(index, 1, { ...this.images[index], position: newPosition });