vue-konva：从舞台工作中删除特定节点不正确

Question

我将一组图像网址作为道具传递给我的Konva组件，为每个网址创建一个图像对象，将该对象存储在数据对象中（使用Vue的$set方法保持对象文字无效），然后使用v-for创建我的数据对象中的每个图像对象都有一个v-image。这似乎工作正常，但是我遇到了一个问题，如果我尝试删除其中一个图像，将删除2个图像。只有当我尝试删除的图像不是最顶层的图像时才会发生这种情况。在控制台中，我收到警告Konva warning: Node has no parent. zIndex parameter is ignored.。我的预感是，这是konva的destroy方法在$delete中使用的数据对象上与vue的v-for方法冲突的结果。我已经和我斗争了好几个小时，并且感谢我能得到的任何帮助。相关代码如下。谢谢！

亲

<template>
  <editor ref="editor" :image-props.sync="images"/>
  <button @click="remove">remove</button>
</template>
export default {
  components: {
    Editor,
  },
  data() {
    return {
      images: [url1, url2, etc...],
    };
  },
  methods: {
    remove() {
      this.$refs.editor.removeSelectedImage();
    },
}

儿童

<template>
  <div>
    <v-stage>
      <v-layer>
        <v-group>
          <v-image v-for="image in Object.values(images)" 
           :key="image.id" :config="image"/>
        </v-group>
      </v-layer>
    </v-stage>
  </div>
</template>
export default {
  props: {
    imageProps: Array,
  },
  data() {
    return {
      images: {},
      selectedNode: null //this gets updated on click
    },
  watch: {
    imageProps() {
      this.registerImages();
    },
  mounted() {
    this.registerImages();
  },
  methods: {
    registerImages() {
      this.imageProps.forEach(url => {
         if (!this.images[url]) {
           let img = new Image();
           img.src = url;
           img.onload = () => {
              this.$set(this.images, url, {
                 image: img,
                 draggable: true,
                 name: url,
                 x: 0,
                 y: 0,
              });
           }
        }
     });
  },
  removeSelectedLayer() {
     let newImageProps = this.imageProps.filter(url => url !== this.selectedImageName);
     this.$emit('update:image-props', newImageProps);
     this.selectedNode.destroy();
     this.$delete(this.images, this.selectedImageName);
     this.stageArea.draw();
},

如果我在Vue devtools中检查组件，images对象看起来正确以及imageProps，（甚至Vue DOM树看起来正确，并且正确数量的v-images）但是画布显示的图像少于它应该的1。同样，只有当我删除最初不在顶部的图像时才会发生这种情况。如果我删除最顶层的图像似乎功能正常。

Answer 1

当您使用vue-konva开发应用程序时，最好不要手动触摸Konva节点（只有极少数情况下需要它时，例​​如更新Konva.Transformer）。

您无需手动调用node.destroy()。只是你的data项目。

从你的演示中，我看到你没有使用key属性（你使用的是image.id，但它是undefined）。在这种情况下使用密钥非常重要。

更新的演示：https://codesandbox.io/s/30qpxpx38q