title: Recreating something in Vue that I did in React
body: <p>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.</p>
  
  <pre><code>  {this.state.contact.map((contact, index) =&gt; 
                  &lt;a className="social-icons" href={`${contact.href}`} target="_blank" rel="noopener noreferrer" key={index}&gt;
                      &lt;h3 className={`ion-social-${contact.title}`}&gt;&lt;/h3&gt;
                  &lt;/a&gt;
              )}
  </code></pre>
  
  <p>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>
  
  <pre><code> &lt;p class="social-media snippet ion-social-{{social.title}}" v-for="social in socials" v-bind:key="social"&gt;
    {{ social.title }}
  &lt;/p&gt;
  </code></pre>
  
  <p>I'm relatively new to Vue also.</p>