vue-konva:从阶段中移除特定节点不正确

Question

我将一个图像url数组作为道具传递给我的Konva组件，为每个url创建一个图像对象，将该对象存储在一个数据对象中(使用Vue的$set方法来保持对象文字的反应性)，然后使用v-for为我的数据对象中的每个图像对象创建一个v-image。这似乎工作得很好，但是我遇到了一个问题，如果我试图删除其中一个图像，两个图像将被删除。只有当我尝试删除的图像不是最上面的图像时，才会发生这种情况。在控制台中，我得到了警告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-image看起来也是正确的)，但是画布显示的图像比它应该显示的少了1张。同样，只有当我删除一个最初不在顶部的图像时，才会发生这种情况。如果我删除最上面的图像，它似乎可以正常工作。

Answer 1

当你使用vue-konva开发应用程序时，最好不要手动接触Konva节点(只有在需要的时候才会出现这种情况，比如更新Konva.Transformer)。

您不需要手动调用node.destroy()。只是给你的data的一件物品。

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

更新demo：https://codesandbox.io/s/30qpxpx38q