Воссоздание чего-то во Vue, что я делал в React
Я работаю над своим личным портфолио, и у меня есть мои социальные сети, сохраненные как шаблон, чтобы просто использовать этот код в 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.
Ответы 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>
Вы получаете следующую ошибку:
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.
Вы хотите установить строковый литерал. Просто напишите это так, как если бы вы писали обычный HTML.
class = "myClass". Вы не можете интерполировать здесь javascript, что вы пытаетесь сделать и о чем предупреждал Vue.Вы хотите использовать переменную javascript, определенную в вашем компоненте. Используйте
v-bind.v-bind:class = "myClassVariable"То же, что и выше, где
:- это просто ярлык дляv-bind.:class = "myClassVariable"
Рабочий пример привязки вашего класса выглядит так:
<p class = "social-media snippet" :class = "'ion-social-'+social.title" ...
Значение внутри :class = "..." - это просто выражение, где 'ion-social' - это строковый литерал, к которому добавляется переменная social.title. Как только ваш шаблон станет беспорядочным, что, по-моему, сейчас, вы должны удалить логику из своего шаблона и поместить ее в компонент.
Спасибо за ответ!
<div class = "social-media snippet" v-for = "social in socials" v-bind:key = "social"> <a v-bind:href = "[social.href]" target = "_blank"> <i class = "icon" v-bind:class = "[social.ion]"> </i> </a> </div>В итоге я попробовал это, и это тоже сработало!