VueJS dynamic property to be passed as value of HTML/VueMaterial element attributes

Question

I am using Vue 2.6.12 in my project along with Vue & Laravel Mix with Webpack for asset management. And I am relatively new to VueJS.

Now I need to pass the dynamic VueJS property value as value into the existing HTML/VueMaterial element attribute as it's value, something like below:

 <md-icon md-src="{{iconPath}}{{iconName}}-icon-{{iconColor}}.svg">

I know with VueJS we can create dynamic attributes from the props, but I prefer not to change the attribute name and still pass the prop value such that when something like the above gets compiled it becomes:

  <md-icon md-src="/assets/icons/document-tab-icon-green.svg">

The full Vue icon component MyIcon.vue is below:

  <template>
        <div>
            <md-icon md-src="{{iconPath}}{{iconName}}-icon-{{iconColor}}.svg">
        </div>
    </template>



 <script>
    export default {
        name: 'MyIcon',
        props: {
            iconPath: {type: String, default: '/assets/icons/'}
            iconColor: {type: String, default: 'green'},
            iconName: {type: String, default: 'document-tab'}
        }
    }
    </script>

I do have svgs present in the {projectroot}/public/assets/icons directory path.

How can I achieve what I mentioned ?

Answer 1

You can try to bind md-src to a computed property that returns full path of the svg like below :

...
<md-icon :md-src="svgPath">
...
computed:{
   svgPath(){
    return  `${this.iconPath}${this.iconName}-icon-${this.iconColor}.svg`
  }
}
...