vue-konva：从工作不正确的阶段中删除特定节点

Question

我将一组图像 url 作为 props 传递给我的 Konva 组件，为每个 url 创建一个图像对象，将该对象存储在一个数据对象中（使用 Vue 的 $set 方法来保持对象文字的反应性），然后使用v-for 为我的数据对象中的每个图像对象创建一个v-image。这似乎工作正常，但是我遇到了一个问题，如果我尝试删除其中一个图像，则会删除 2 个图像。仅当我尝试删除的图像不是最上面的图像时才会发生这种情况。在控制台中，我收到警告 Konva warning: Node has no parent. zIndex parameter is ignored.。我的预感是，这是因为 konva 的 destroy 方法与 vue 的 $delete 方法在 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