[Vuejs]-Recreating something in Vue that I did in React

by

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

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

Leave a comment