无法理解的“未捕获的TypeError:无法读取null的属性'removeChild'”错误

时间:2019-10-26 14:40:48

标签: vue.js

在我的应用中,单击某个按钮会将其标题更改为另一个标题,然后再次单击将其更改为默认标题。

单击它会收到以下错误消息:

  

未捕获的TypeError:无法读取null的属性'removeChild'

这对我来说没有意义,因为这里没有DOM操作。我在保持错误的同时尽可能地简化了代码:

data () {
  return {
    ctaCaptions: [
      'see case studies',
      'hide case studies'
    ],
    ctaCaption: ''
  }
},
methods: {
  handleClick () {
    this.ctaCaption = this.ctaCaptions[1]
  }
}

HTML:

<a
  @click="handleClick"
  v-html="ctaCaption"
/>

关于导致此错误的原因的任何建议?

1 个答案:

答案 0 :(得分:0)

methods: {
  handleClick () {
    this.ctaCaption = this.ctaCaptions[1]
  }
}

在内部事件处理程序中,this指向event.target(在您的情况下为HTMLButtonElement)。

在您的情况下,您需要引用您的组件。您可以通过不同的方式实现这一目标:

使用显式绑定:

methods: {
  handleClick () {
    this.ctaCaption = this.ctaCaptions[1]
  }.bind(this)
}

或者您可以使用ES6箭头功能(这些箭头在定义时而不是在执行时保留this):

methods: {
  handleClick: () => {
    this.ctaCaption = this.ctaCaptions[1]
  }
}

要获得更具体和准确的见解,您必须显示使用已显示的模型代码的HTML代码段。另外,您展示的代码中没有一行使用removeChild