Vue: Rendering async loaded component is causing attrs change.

Created on 16 Sep 2019 · 4Comments · Source: vuejs/vue

Version

2.6.10

Reproduction link

https://codesandbox.io/s/vue-template-7hwty

Steps to reproduce

Create component with render function which can render another component after time.
Rendering component after promise resolution/timeout is causing render twice and change of $attrs if child component has any prop with key equal to attr.
Comment prop in targetComponent and reload page.
All attrs are fine again.

What is expected?

Render function is called once and $attrs of component are not changed.

What is actually happening?

Render is called twice and attrs which has key same as props of child component are removed.

I created on my project custom loader component which has to handle loading of lazy loaded components and networking errors, because I can't use https://vuejs.org/v2/guide/components-dynamic-async.html#Handling-Loading-State in my case. This bug can be ommited by not adding downloaded component to reactivity (outside data as variable).

bug has workaround

Source

Mighty683

All 4 comments

Using a copy of $attrs: {...this.$attrs} also removes the problem

posva on 17 Sep 2019

❤1

Maybe you should use props to resolve this problem：

  render(h) {
    console.log("Attributes of loader:", this.$attrs);
    if (this.targetComponent) {
      return h(this.targetComponent, {
        props: this.$attrs  // Change attrs to props，not `attrs: this.$attrs`
      });
    } else {
      return h("div", "Component is loading");
    }
  }

because you are trying to get props in

const targetComponent = {
  props: {
    // COMMENT PROP
    someProp: {
      type: String
    }
  },
  render(h) {
    console.log("Props of target", this.$props); // You can not get $props when render params only has attrs
    return h("div", "WITH PROP:" + this.someProp);
  }
};

joe223 on 20 Sep 2019

👍1

Both creating copying of attrs and passing with props resolve my problem, but I am curious still why parent component $attrs are changing because of rendering child which contain props with same key?

Mighty683 on 22 Sep 2019

It's because the $attrs object is reassigned. I knew I saw this issue already somewhere else:
Duplicate of https://github.com/vuejs/vue/issues/10115

posva on 22 Sep 2019

Was this page helpful?

0 / 5 - 0 ratings