0

I am quite new to VueJs. I dynamically import and render .vue component. But when I do that vue warning display like this,

[Vue warn]: Vue received a Component which was made a reactive object. This can lead to unnecessary performance overhead, and should be avoided by marking the component with `markRaw` or using `shallowRef` instead of `ref`. 
Component that was made reactive:

But after I markRaw or shallowRef the import item, component not display.

template....

<div class="card-content padding-horizontal padding-top">
    <div class="terms-block scrolling">
        <div ref="content">
            <component :is="dynamicStatementComponent" />
        </div>
    </div>
</div>

script....

data() {
        return {
            importedModule: null
        }
    },
    computed: {
        dynamicStatementComponent() {
    
            let filePath;
    
            import(filePath)
                .then((module) => {
                    this.importedModule = markRaw(module.default);
                })
                .catch(() => {
    
                });
    
            return this.importedModule;
        }
    }
D.madushanka
  • 429
  • 6
  • 17
  • dynamicStatementComponent is the case of https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call . There should be no side effects in computeds. In your case filePath and so the result is not reactive so async code belongs to lifecycle hook, i.e. onMount . As for the warning, you can use shallowRef or Object.freeze. It's not shown how shallowRef was used – Estus Flask Jun 30 '23 at 08:36

0 Answers0