Воссоздание чего-то в Vue, что я сделал в React

Question

Я работаю над своим личным портфолио, и мои социальные сети сохранены в качестве шаблона, чтобы просто отказаться от использования этого кода в React.

  {this.state.contact.map((contact, index) => 
                <a className="social-icons" href={`${contact.href}`} target="_blank" rel="noopener noreferrer" key={index}>
                    <h3 className={`ion-social-${contact.title}`}></h3>
                </a>
            )}

Я пытаюсь создать тот же эффект при использовании Vue для ion-social-icons, но мне сложно разобраться, как его реализовать, поскольку я просто получаю сообщение об ошибке при использовании v-bind:class, который не ' не очень помогает. Это то, что я сейчас пытаюсь.

 <p class="social-media snippet ion-social-{{social.title}}" v-for="social in socials" v-bind:key="social">
  {{ social.title }}
</p>

Я также относительно новичок в Vue.

Answer 1

Вы получаете ошибку:

Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. 
For example, instead of <div class="{{ val }}">, use <div :class="val">.

Вдобавок ко всему, есть 3 способа установить атрибут html в Vue.

1. Вы хотите установить строковый литерал. Просто напишите это так, как если бы вы писали обычный HTML.

   class="myClass", Вы не можете интерполировать javascript здесь, что вы пытаетесь сделать и о чем предупреждал Vue.

2. Вы хотите использовать переменную javascript, определенную в вашем компоненте. использование v-bind,

   v-bind:class="myClassVariable"

3. То же, что и выше, где : это просто ярлык для v-bind,

   :class="myClassVariable"

Рабочий пример привязки вашего класса выглядит следующим образом:

<p class="social-media snippet" :class="'ion-social-'+social.title" ...

Значение внутри :class="..." это просто выражение, где 'ion-social' строковый литерал, который добавляется к переменной social.title, Как только ваш шаблон запутается, что сейчас, вы должны удалить логику из вашего шаблона и поместить его в компонент.

Answer 2

Использование интерполяции в атрибутах HTML было возможно в Vue 1.0, но больше не поддерживается начиная с 2.0. Здесь вам нужно использовать v-bind, а затем добавить переменную со строкой, как в JS.

<p
  v-for="social in socials"
  v-bind:class="'social-media snippet ion-social-' + social.title"
  v-bind:key="social"
>
  {{ social.title }}
</p>