在 vuejs 中，我在拖动和调整图像大小时遇到​​问题

Question

我想反映图像大小的变化，图像列表中的位置。

当单个图像时我可以做到这一点。 但是当我处理列表中的多个图像时，它不起作用。

这是我的代码

<div v-for="item in items" :key="item.img" ref="items">
  <VueDraggableResizable @dragging="onDrag" @resizing="onResize" :parent="false" style="border: 1px solid black;">
    <img ref="imgRef" :src="item.img" alt="no Picutres">
  </VueDraggableResizable>
</div>

下面是方法 onResize

onResize (x, y, width, height) {
  this.x = x
  this.y = y
  this.width = width
  this.height = height
  this.$refs.imgRef.width = width
  this.$refs.imgRef.height = height
},

错误消息只是说“未定义 imgRef”。 我的代码有什么问题？

我会评论我的完整源代码。

Answer 1

这是我的完整源代码（评论不允许我写长字符哈哈）

<template>
  <div class="portfolio">
    <VueDraggableResizable
    @dragging="onDrag"
    @resizing="onResize"
    :parent="false"
    style="border: 1px solid black;"
    >
      <img
      ref="imgRef"
      src="../assets/logo.png"
      alt="no logo"
      width="200px" height="200px"
      />
      <h3>Hello World!</h3>
      <p>{{ x }} x {{ y }}</p>
      <p>{{ width }} x {{ height }}</p>
    </VueDraggableResizable>
    <div v-for="item in items" :key="item.img" ref="items">
      <VueDraggableResizable @dragging="onDrag" @resizing="onResize" :parent="false" style="border: 1px solid black;">
        <img ref="imgRef" :src="item.img" alt="no Picutres">
      </VueDraggableResizable>
    </div>
    <input type="file" @change="onFileSelected">
  </div>
</template>
<script>
import VueDraggableResizable from '../../node_modules/vue-draggable-resizable'
import '../../node_modules/vue-draggable-resizable/dist/VueDraggableResizable.css'

export default {
  components: {
    VueDraggableResizable
  },
  data: () => ({
    height: 0,
    width: 0,
    x: 0,
    y: 0,
    items: [],
    studentID: '2014122177'
  }),
  methods: {
    onResize (x, y, width, height) {
      this.x = x
      this.y = y
      this.width = width
      this.height = height
      this.$refs.imgRef.width = width
      this.$refs.imgRef.height = height
    },
    onDrag (x, y) {
      this.x = x
      this.y = y
    },
    onFileSelected (e) {
      var files = e.target.files || e.dataTransfer.files
      if (!files.length) {
        return
      }
      this.createImage(files[0])
    },
    createImage (file) {
      var reader = new FileReader()
      var tempImg = {}
      reader.onload = (e) => {
        tempImg.x = 500
        tempImg.y = 200
        tempImg.height = 100
        tempImg.width = 100
        tempImg.img = e.target.result
        this.items.push(tempImg)
      }
      reader.readAsDataURL(file)
    }
  }
}
</script>