child component not updating when prop (boolean) is changed by parent component

Question

When I change the props value (Boolean) in the parent Vue component, the child component won't update in order to trigger a modal to open.

In my parent component a click event is setting the value of openModal from false to true. This value is then passed through a prop down to a child component. Within that child component the updated Boolean value should then add a class through class-binding to a div which in return opens a modal.

Parent component:

<FilmListItem
      v-for="slice in slices"
      @click.native="openModal=true"
    />

<child-component :modal="openModal">
...

data() {
  return {
    openModal: false
  }
}

Child component:

<div
    class="modal__container"
    :class="{ 'modal--show': showModal }">
...
export default {
  props: {
    modal: Boolean
  },
  data() {
    return {
      showModal: this.modal
    }

In the vue dev tools I can see, that the value of the prop changes in the parent. Yet, my child component doesn't update. It worked when I forced the child component to reload when I was assigning a new :key value together with changing the Boolean. But that feels a little hacky to me. Also, a watcher within the child component didn't do the trick. It simply wouldn't watch the changed prop value. Any ideas very much appreciated. Thanks in advance.

Moritz Laube · Accepted Answer · 2019-04-05 22:37:21Z

0

I actually found the solution myself jut now:

In the child component I was trying to access the props' data through the data object. But I just accessed to props' data directly like so:

<div   
  :class="{ 'modal--show': modal }"> 
...

export default {   
  props: {
    modal: Boolean 
  } 
}

answered Apr 5, 2019 at 22:37

Moritz Laube

3991 gold badge5 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

sitesbyjoe · Accepted Answer · 2019-10-16 16:59:18Z

0

Correct.

Other options for syncing if this parent/child relationship is more complex, or you needed to pass back upward to the parent:

Put the :modal value in a Vuex store and use a computed property on the child component.
Use an EventBus: https://alligator.io/vuejs/global-event-bus/

answered Oct 16, 2019 at 16:59

sitesbyjoe

1,86115 silver badges21 bronze badges

Collectives™ on Stack Overflow

child component not updating when prop (boolean) is changed by parent component

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related