Рендер иконок по условию

Question

есть такой массив который прилетает с get запроса comfort: ["wc", "wifi", "coffee"] 0: "wc" 1: "wifi" 2: "coffee"

Есть в разметке 3 картинки - которые должны отображаться если такие ключи есть

<img src="@/assets/images/icons/ws-icon.svg">
<img src="@/assets/images/icons/comfort-icon.svg" alt="">
<img src="@/assets/images/icons/wifi-icon.svg" alt="">

Answer 1

Если имя ключа легко переводится в имя иконки, то можно поступить следующим образом:

Сохраняем массив ключей вот сюда:
```
data () {
  return {
    keys: [],
    ...
  }
}```
```
Создаём computed-свойство icons, которое возвращает массив урлов иконок на основе массива ключей, вот так:
```
computed: {
  icons () {
    const res = []
    for (let i = 0; i < this.keys.length; i++) {
      res.push(`...icons/${this.keys[i]}-icon.svg`
    }
    return res
  }
}```
```
Используем v-for, чтобы отрисовать иконки:

<img v-for="url in icons" src="url" .../>

Тадааам! Минимум кода, максимум иконок!

БЛОГ НА HUSL

Рендер иконок по условию

Ответы (1 шт):