VueJS - 将多个图像src称为自定义道具

Question

我有一小组图标，我想根据组件的类型来调用自定义图像道具。代码如下所示：

Vue.component('otherArticles', {
      template: `

       <!-- Component -->
       <li>
           <img :src="icon.text && icon.video" alt="icon">
           <a :href="url">{{ Title }}</a>
       </li>
       `,
      props: {
          title: String,
          url: String,
          icon: [
               {
                    text: "/resources/img/icons/text-icon.svg",
                    video: "/resources/img/icons/video-icon.svg"
               }
          ]

      }
 });

理想情况下，在我的HTML中，我想称他们为：

<!--Component with text icon-->
<other-articles
       icon='text' <!-- how i'd like to call the text icon as img src -->
       url="."
       title="Text article title">
</other-articles>

<!--Component with video icon-->
<other-articles
       icon='video' <!-- how i'd like to call the video icon as img src -->
       url="."
       title="Video article title">
</other-articles>

img src绑定是不正确的我知道，我正在使用它作为我认为它应该如何完成的一个例子，但我正在寻找关于如何正确执行此操作的任何和所有建议，所以我可以称之为html如示例所示。

我只有这两个图标，每个图标的src位置可能会改变，但我想以同样的方式调用它，即使我必须更新未来任何一个的src位置，保持html调用相同或相似。任何帮助，将不胜感激。谢谢

Answer 1

首先在数据函数中将您的图标列表声明为以下内容：

data() {
    return {
        iconList: {
            text: '/resources/text.png',
            video: '/resource/video.png',
       }
    };
}

确保删除列表并重命名对象，因为您不能在具有相同名称的数据中使用prop和条目。然后将icon的定义添加到您的道具部分，如下所示：

props: {
    icon: {
        type: String,
        required: true,
    },
},

这告诉Vue将支柱作为一个字符串进行类型检查，并在它不存在时发出警告或不是字符串。

现在您需要更新模板函数以使用此新prop作为查找相关图标的键：

template: `
<img :src="iconList[icon]"/>
`,

现在您可以将组件用作<comp icon="video"/>