[Vuejs]-TypeError: Cannot set property of undefined

2👍

variable i shouldn’t equal to the this.hpThemes.length

for (var i = 0; i < this.hpThemes.length; i++) { // replace '<=' operator with '<'
   ...
}

2👍

I have just changed the this.theme to this.hpTheme below. Hope this works for you.

showDetails(id) {
  for (var i = 0; i <= this.hpThemes.length; i++) {
    if (id === this.hpThemes[i].id) {
      this.hpTheme.hpTitle = this.hpThemes[i].hpTitle
      this.hpTheme.hpContent = this.hpThemes[i].hpContent
    }
   }
  }

2👍

@WilliamWang’s answer is perfect to remove that error, but your code be more clean and shorter if you just pass the clicked theme as parameter then assign it to this.theme :

@click="showDetails(hpTheme)"

and

methods: {
  showDetails(theme) {
    this.hpTheme={hpTitle: theme.hpTitle, hpContent: theme.hpContent }
  }
}

Leave a comment