0

I'm working on my own personal portfolio and I have my social media saved as a template to just pull from using this code in 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>
            )}

I'm trying to create the same effect while using Vue for the ion-social-icons but I'm having a hard time figuring out how to implement it as I just receive an error talking about using v-bind:class that doesn't help much. This is what I'm currently trying.

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

I'm relatively new to Vue also.

Nate Sorkin
  • 1

2 Answers2

3

The error you get is:

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">.

Off the top of my head, there are 3 ways to set an html attribute in Vue.

  1. You want to set a string literal. Just write it as if you were writing regular HTML.

    class="myClass". You cannot interpolate javascript here, which is what you're trying to do and what Vue was warning about.

  2. You want to use a javascript variable defined in your component. Use v-bind.

    v-bind:class="myClassVariable"

  3. Same as above, where : is just a shortcut for v-bind.

    :class="myClassVariable"

A working example of your class binding looks like this,

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

The value inside :class="..." is simply an expression, where 'ion-social' is a string literal that's appended with the variable social.title. Once your template gets messy, which imo it is now, you should remove logic from your template and put it inside the component.

Eric Guan
  • 15,474
  • 8
  • 50
  • 61
1

Using interpolations in HTML attributes was possible in Vue 1.0, but is no longer supported since 2.0. Here, you need to use v-bind, then add the variable with the string like you would in JS.

<p
  v-for="social in socials"
  v-bind:class="'social-media snippet ion-social-' + social.title"
  v-bind:key="social"
>
  {{ social.title }}
</p>
kingdaro
  • 11,528
  • 3
  • 34
  • 38