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

在我的应用程序中，单击某个按钮会将其标题更改为其他标题，再次单击该按钮会将其更改回默认标题

单击它时，我会收到以下错误消息：

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

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

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

HTML:

关于这一错误的原因有什么建议吗

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

在事件处理程序中，它指向事件的event.target，在您的例子中是HTMLButtonElement

在您的情况下，您需要对组件的引用。您可以通过不同的方式实现这一点：

使用显式绑定：

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

或者，您可以使用ES6 arrow函数，这些函数在定义时而不是在执行时保留：

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

为了获得更具体、更精确的信息，您必须显示使用所显示的模型代码的HTML代码段。另外，在显示的代码中没有一行使用removeChild。

添加=>使handleClick成为箭头函数时，我得到语法错误：预期为意外标记{错误。我还编辑了问题以添加HTML片段。最后，事实上，我没有在组件代码中的任何地方使用removeChild，也没有在整个应用程序中使用removeChild。事实上，这是我问题中最令人费解的方面。我建议不要对简单文本使用v-HTML。而是使用{{CTAPCAPTION}。此外，a不能自动关闭，但不确定Vue模板中是否允许。我这样做了，它以某种方式使removeChild问题消失…谢谢！但不确定在此处接受答案时该怎么做？

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