Question

我使用以下代码在每次单击按钮时添加一个组件：

      var ComponentClass2 = Vue.extend(FramePicture)
      var instance2 = new ComponentClass2({
        propsData: {
          frame: this.frames
        }
      })
      instance2.$mount()
      this.$refs.frameContainer.appendChild(instance2.$el)

这很好用，但是每次单击时，每个元素都会出现在前一个元素的下方。因为我希望将任何新元素显示在与上一个元素相同的位置，所以我想在添加新元素之前在每次后续单击时都将其删除，例如：

      if (this.instance2.$el) {
        this.$refs.frameContainer.removeChild(this.instance2.$el)
      }

这给了我：“无法读取未定义的属性'$ el'”，并阻止显示任何元素。

我想然后在显示第一张图片后立即将变量设置为1，并将removeChild块修改为：

      if (this.showingFrame === 1) {
        this.$refs.frameContainer.removeChild(this.instance2.$el)
        this.showingFrame = 0
      }

这允许呈现第一个元素，但在第二次单击时给出相同的错误。

我做错了什么？如何删除元素？

更新

在提出建议后，我现在可以在满足特定条件时删除该实例，但是我无法再呈现新的instance2。如果我使用console.Log（instance2。$ el），我可以读取它，但是它不呈现。

这就是我所做的：

        if ((this.currentBubble === 0) && (this.frames.picture)) {
        //first remove previous instance        
        this.$refs.frameContainer.remove()
        //then render new instance
        var ComponentClass2 = Vue.extend(FramePicture)
        var instance2 = new ComponentClass2({
          propsData: {
            frame: this.frames
          }
        })
        instance2.$mount() // pass nothing
        this.$refs.frameContainer.appendChild(instance2.$el)
        console.log(instance2.$el)
      }

所以现在的问题是，删除前一个实例后，如何渲染新的实例2？

如何在附加新实例之前删除子实例

0 个答案: