CODEWITHSUNDEEP
javascriptvue.js
alex
alex

Reputation: 7611

How to make the following Vue code reactive?

In this code:

handleChangeTab (toName, toIndex) {
  this.tabList.forEach((tab, index) => {
    tab.active = false
    this.$children[index].prefs.active = false
    if (tab.name === toName) {
      this.$children[toIndex].prefs.active = true
      tab.active = true
      console.log('tabList', this.tabList)
      console.log('this.$children', this.$children)
    }
  })
},

this.tabList[1].active becomes true when handleChangeTab is triggered. However, this.$children[1] becomes false. I think this.$children[toIndex].prefs.active = true is messing up with Vue's reactive features.

How to fix this? In other words, how to write the reactive version of this.$children[toIndex].prefs.active = true?

Upvotes: 1

Views: 49

Answers (1)

ittus
ittus

Reputation: 22413

You can try to deep copy data:

handleChangeTab (toName, toIndex) {
  const tabCopy = JSON.parse(JSON.stringify(this.tabList))
  tabCopy.forEach((tab, index) => {
    tab.active = false
    this.$children[index].prefs = {
      ...this.$children[index].prefs,
      active: false
    }

    if (tab.name === toName) {
      this.$children[index].prefs = {
        ...this.$children[index].prefs,
        active: true
      }
      tab.active = true
    }
  })
  this.tabList = tabCopy
}

But the better solution is passing props to your children component. Should not change children data directly from parent.

Upvotes: 1

Related Questions