The Blog of Rizal Renaldi

Rizal Renaldi

← Back

Passing Data From Child to Parent

11 May 2021

code

What to achieve:
IN RAGE MODE AFTER 10 HOURS The idea is fucking simple. Everytime data in child component changes, parent get that data and fucking show it. Just. Fucking. Show. It.

It's now 3 AM — Well, I know it's probably because I haven't read and understand much about how this emit works. The thing is, this is Vue stuff and most of the time I came across tutorial or answers in Stackoverflow, people explain in Vue's way. I know it's similar with Nuxt (Obviously because Nuxt is based on Vue), but still, shit's different in real life man. OK, enough about the rants 😂 :no_good:

You have no idea how many websites, stackoverflows, tutorials, videos, I clicked to get this answer this past ~10 hours. Man, I can't even thinking right now. But this, this small answer in stackoverflow, barely have any likes, OP being a dick by not accepting it as answer, is just become my saviour and ended my 10 hours of suffer looking for answer, just like that.

Let me present to you, my saviour:


The correct way to do it would be:

<child-component-1 :showNav.sync="showNav">

And within the child component you would update that by doing:

this.$emit('update:showNav', value)

The parent would define this property:

data() {
  return {
    showNav: default_value
  }
}

You would have to pass that variable to every child component. Every child component would have to define it as a property.

Perhaps a better way to do it would be to instead create a simple store within nuxt and use that to house the settings.


Look how simple the answer is, look how it goes straight to the point, no fuss and all the shits, look how awesome it is.

I've noticed the last line talked about Store. I guess the next thing I need to learn is Vuex.

To whoever the user that post that answer, I send my biggest thanks to you! 🙏 :punch:

The Blog of Rizal Renaldi

2024 © rizalrenaldi.com — Made with 🖖