VueJS 动态属性作为 HTML/VueMaterial 元素属性的值传递

Question

我在我的项目中使用 Vue 2.6.12 以及 Vue & Laravel Mix with Webpack 进行资产管理。而且我对 VueJS 比较陌生。

现在我需要将动态 VueJS 属性值作为值传递给现有的 HTML/VueMaterial 元素属性，如下所示：

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

我知道使用 VueJS 我们可以从 props 中创建动态属性，但我不希望更改属性名称并仍然传递 prop 值，这样当编译上述内容时，它会变成：

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

完整的 Vue 图标组件 MyIcon.vue 如下：

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

{projectroot}/public/assets/icons 目录路径中确实有 svg。

我怎样才能达到我提到的目标？

Answer 1

您可以尝试将 md-src 绑定到返回 svg 完整路径的计算属性，如下所示：

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