VueJS child components are not updated when parent data changes

Question

I have a parent component that wraps multiple child components. I want the parent component to manage the state of all its children. When the child is clicked I want the parent to know and I want to update all it's siblings so they know which one is active.

JSFIDDLE DEMO

Vue.component('child', {
  template: '#childtemplate',
  props: ['index', 'activeIndex'],
  methods: {
    updateActiveIndex: function() {
      console.log("emitting");
      this.$emit('updateEvent', this.index);
    }
  }
});

Vue.component('parent', {
  data: function() {
    return {
      activeIndex: 0
    }
  },
  render: function(createElement) {
    console.log("rendering ai->", this.activeIndex);

    this.$options._renderChildren.forEach(function(item, index) {
      if (item.data === undefined)
      return;

      item.componentOptions.propsData = {
        index: index,
        activeIndex: this.activeIndex
      }
    }.bind(this));

    return createElement('div', {}, this.$options._renderChildren);
  },
  methods: {
    handleToggle: function(index) {
      this.activeIndex = index;
    }
  },
  created: function() {
    this.$on('updateEvent', this.handleToggle);
    //try manually update it, but the children don't update.
    setTimeout(function(){this.activeIndex = 6}.bind(this), 3000);
  }
});

new Vue({
  el: '#app'
})

I have tried adding event listener option to the createElement function in parent render() like so:

return createElement('div', {on:{updateEvent: this.handleToggle}}, this.$options._renderChildren);

I have tried setting an $on listener in parent created function. But this is not triggered.

I have tried manually updating activeIndex with a timeout which updates it on the root, but children are not updated.

A hack solution and the only thing I've found to work is to reference a $parent callback directly from the child passing up an index, then in the parent looping through the children and assigning the prop manually. This causes vue warn errors but gets the job done.

Is there a better way?

This thread has what you're looking for (via props, a store, or Vuex). The Answer chosen was using props: stackoverflow.com/a/41923080/1695318 — iamjpg
– iamjpg, Commented Mar 13, 2017 at 17:23
Do you know what the children will be? As in do you know they are "child" components? — Bert
– Bert, Commented Mar 13, 2017 at 19:32
propsData isn't reactive afaik. That's mostly used for unit testing. Use props instead. That will work interactively. If you still want to keep track of the state in every child on it's own, use a public pubsub approach. — Codebryo
– Codebryo, Commented Mar 14, 2017 at 7:22
I did try props before propsData, and no props were being picked up in child components. See: stackoverflow.com/questions/42764535/… — Kiee
– Kiee, Commented Mar 14, 2017 at 8:53

Bert · Accepted Answer · 2017-03-13 20:02:59Z

1

I'm not sure this is better, but it works in this modified fiddle. Basically it iterates over the default slot, discards anything that isn't a child, sets the appropriate properties and includes whatever is currently in each child's slot.

render: function(createElement) {
  console.log("rendering ai->", this.activeIndex);

  const children = [];
  for (let i=0; i < this.$slots.default.length; i++){
    if (!(this.$slots.default[i].tag == "child"))
      continue;

    children.push(createElement(Child, {
      props:{
        index: i,
        activeIndex: this.activeIndex
      },
      on:{
        updateEvent: this.handleToggle
      }
    }, this.$slots.default[i].children))

  }

  return createElement('div', {}, children);
}

answered Mar 13, 2017 at 20:02

Bert

82.6k17 gold badges205 silver badges166 bronze badges

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

4 Comments

Codebryo Over a year ago

You should use Vue the way it's intended to work and don't try to run over data manually again. Vue has reactivity in place, just leverage it correctly.

Kiee Over a year ago

Thanks for taking the time to answer, it's greatly appreciated.

Bert Over a year ago

@Kiee Take a look at this, using scoped slots. codepen.io/Kradek/pen/KWvqRL/?editors=1010

Kiee Over a year ago

I amended my comment as I solved the seperate scopedSlot issue and it's not technically relevant to initial question. Thanks again.

Collectives™ on Stack Overflow

VueJS child components are not updated when parent data changes

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related