代码之家 › 专栏 › 技术社区 › drake035

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

vue.js

drake035 · 技术社区 · 5 年前

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

单击它时,我收到以下错误消息:

Uncaught TypeError:无法读取null的属性“removeChild”

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 回复 | 直到 5 年前

connexo 5 年前

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

内部事件处理程序, this event.target (就你而言 HTMLButtonElement

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

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

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

removeChild .

推荐文章

StuP · 响应式Vue组件在数据更改时不更新

2 年前

dbzx10299 · 对从Api端点返回的数据使用Vue转换组

2 年前

mrDandaleonx · Vue3获取div内容并将其发布到表单

2 年前

ateymour · Vue3在异步调用后将道具传递给子组件

2 年前

Artur Müller Romanov · 是否可以有条件地渲染布局?

2 年前

Ilijanovic · 对象可能未定义

2 年前

devAR · 单击其他组件时,单选按钮未保持选中状态

2 年前

Coderama · 在v-for指令中使用:key属性时,TS应出现类型错误

2 年前

Suffii · Vue表单输入绑定的条件绑定存在问题

2 年前

akkonrad · 函数的作用是:返回数据属性为空的实例

2 年前