VueJS - вызов нескольких изображений src в качестве пользовательских реквизитов - PullRequest
Новая
       29

VueJS - вызов нескольких изображений src в качестве пользовательских реквизитов

0 голосов
/ 01 мая 2019

У меня есть небольшой набор значков, которые я хочу называть пользовательской опорой изображения в зависимости от того, какой тип элемента является компонентом.Код выглядит следующим образом: 

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такой же или похожий.Любая помощь будет оценена.Спасибо

1 Ответ

1 голос
/ 01 мая 2019

Сначала начните с объявления списка значков в функции данных следующим образом: 

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

Убедитесь, что удалили список и переименовали объект, так как вы не можете получить реквизит и запись в данных с помощьюодно и то же имяЗатем добавьте определение для icon в раздел с реквизитами следующим образом: 

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

Это говорит Vue о необходимости перепроверить реквизит как строку и предупредить, когда ее нет или нет.

Теперь вам нужно обновить функцию шаблона, чтобы использовать эту новую опору в качестве ключа для поиска соответствующего значка: 

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

Теперь вы можете использовать свой компонент как <comp icon="video"/>

...