在我的应用中,单击某个按钮会将其标题更改为另一个标题,然后再次单击将其更改为默认标题。
单击它会收到以下错误消息:
未捕获的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"
/>
关于导致此错误的原因的任何建议?
答案 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
。