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

Question

我在我的项目中使用 Vue 2.6.12 以及 Vue 和 Laravel 与 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 目录路径中确实有 svgs。

我怎样才能实现我提到的目标？

Answer 1

您可以尝试将 md-src 绑定到一个 属性 的 returns svg 完整路径，如下所示：

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