vuejs - how to Passing props and event dynamically to dynamic component

Question

I have a dynamic component that loads it based on the type of each component and props that I passed are used inside all the components

<div>
        <component
            :is="getComponentName(attribute.type.toLowerCase())"
            :cell-value="listItem[attribute.name]"
            :attribute="attribute"
            :is-read-only="isReadOnly"
            :row-key-id="listItem.keyId"
        />
</div>

and components are loaded from within a json where each type is assigned a component

{
    "dropdown" : {
        "shouldLoadComponent" : "BaseDropDown"
    },
    "assigned" :{
        "shouldLoadComponent" : "BaseDropDown"
    },
    "textbox" : {
        "shouldLoadComponent" : "BaseInput"
    },
    "label": {
        "shouldLoadComponent" : "BaseLabel"
    },
    "switch": {
        "shouldLoadComponent" : "BaseSwitch"
    },
    "time": {
        "shouldLoadComponent" : "BaseLabel"
    },
    "status" : {
        "shouldLoadComponent" : "BaseLabel"
    },
    "comment": {
        "shouldLoadComponent" : "BaseLabel"
    },
    "action": {
        "shouldLoadComponent" : "BaseLabel"
    },
    "personalimage":{
        "shouldLoadComponent" : "BaseLabel"
    }
}

The main problem is that there are a number of non-common props and they are not used within all components

What is the best way to do this?

Now this is a problem for events as well, as each event component has its own unique

If i am not understanding wrong, can you do a switch case in your html template according to attribute.type, do not use for loop? — Kevin Zhang
– Kevin Zhang, Commented Dec 25, 2020 at 8:31
@KevinZhang this template html own is component and inside loop — Mohamadreza Hedayati
– Mohamadreza Hedayati, Commented Dec 25, 2020 at 8:46
Does this answer your question? Passing props dynamically to dynamic component in VueJS — Brother Woodrow
– Brother Woodrow, Commented Dec 25, 2020 at 9:27
i saw this question but not help because this pass props not events — Mohamadreza Hedayati
– Mohamadreza Hedayati, Commented Dec 25, 2020 at 9:32

zia · Accepted Answer · 2020-12-25 10:35:11Z

2

ok just use v-bind and v-on with an object you can play around objects by a computed property

<component :is="myComponent"
 v-bind="myComputedConditionalObject"
 v-on="myComputedConditionalEventObject"
/>

answered Dec 25, 2020 at 10:35

zia

2761 silver badge10 bronze badges

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

Collectives™ on Stack Overflow

vuejs - how to Passing props and event dynamically to dynamic component

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related