serii81
@serii81
Я люблю phр...

Как в vue хранить компонент в массиве?

Добрый день.

Я получаю svg иконки для соц сетей как компонент, и хочу хранить в массиве.

<template>
  <ul class="social-links">
    <li v-for="item in socials" :key="item.id">
      <g-link :to="item.url">{{ item.icon }}</g-link>
    </li>
  </ul>
</template>

<script>
import Facebook from '~/assets/svg/facebook.svg';
import Twitter from '~/assets/svg/twitter.svg';
import Instagram from '~/assets/svg/instagram.svg';

export default {
  data () {
    return {
      socials: [
        {
          id: 1,
          icon: '<Facebook/>',
          url: "https://www.facebook.com",
        },
        {
          id: 2,
          icon: '<Twitter/>',
          url: "https://www.twitter.com",
        },
        {
          id: 3,
          icon: '<Instagram/>',
          url: "https://www.instagram.com",
        }
      ]
    }
  },
  components: {
    Facebook,
    Twitter,
    Instagram
  }
}
</script>

<style lang="scss">

</style>


В реакте такое возможно, а в vue с этим проблемы.
  • Вопрос задан
  • 130 просмотров
Решения вопроса 1
Kozack
@Kozack Куратор тега Vue.js
Thinking about a11y
С чего вы взяли что это компоненты? Скорее всего там либо svg код, либо URL svg файла.
Следовательно вам всего то нужно:
socials: [
        {
          id: 1,
          icon: Facebook,
          url: "https://www.facebook.com",
        },
        {
          id: 2,
          icon: Twitter,
          url: "https://www.twitter.com",
        },
        {
          id: 3,
          icon: Instagram,
          url: "https://www.instagram.com",
        }
      ]
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
serii81
@serii81 Автор вопроса
Я люблю phр...
Все заработало. Спасибо за поддержку.

Проблема была в том, что у иконок не было высоты и ширины, попровил и теперь нормально отображаются.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы