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
@KevinZhang this template html own is component and inside loop — Mohamadreza Hedayati
Does this answer your question? Passing props dynamically to dynamic component in VueJS — Brother Woodrow
i saw this question but not help because this pass props not events — Mohamadreza Hedayati

zia zia · Accepted Answer · 2020-12-25T10:35:11

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"
/>

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

1 Answers