Question

我将一组图像URL传递给我的Konva组件作为道具，为每个URL创建一个图像对象，将该对象存储在数据对象中（使用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-image）但是画布显示的图像比应显示的少1个。同样，只有当我删除最初不在顶部的图像时，才会发生这种情况。如果删除最上面的图像，似乎功能正常。

Answer 1

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

您无需手动致电node.destroy()。只是您的data的一件商品。

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

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

vue-konva：从阶段正常删除特定节点

1 个答案: