Vuejs 2 impossible to interpolate attribute values

Question

 <th :class="{'c-' + column, active: sortKey == column}"
      v-for="column in getColumns()" @click="sortBy(column)">
            {{ column }}
 </th>

I get invalid expression: Unexpected token + in

but the syntax is supposed to be correct.

I tried like 20 other ways and everyone fails

Even if I put only column in there i get [Object object] instead of the actual column name

---

so, this doesn't work at all inside es6 template syntax. It only works if I put the templates inside <script> tags in the index.html file

export default{

  template: `
    <div :class="[c-${column}]">
       ....
       <router-link :to="/list/${item.name}"> test </router-link>
       ....
    </div>
  `,

   created(){

   }

 }

I tried

${column}   - undefined variable
${$column}  - undefined variable
`${column}` - unexpected identifier
{{column}}  - invalid expression in vue

and other combinations and neither works inside the es6 template syntax.

so vuejs templates cannot be used with es6 modules and template syntax?

Answer 1

For HTML class bindings there are two syntax you can use:

Object syntax

<div :class="{ selected: isSelected }"></div>

The presence of the class will be determined by the truthiness of the data property used. The class binding is expecting the following type: { [key: string]: boolean } or Record<string, boolean>.

When using a template string (backticks) as an object property name, you need to wrap it in square brackets.

ie:

<div :class="{ [`${dynamicClassName}`]: true }"></div>

Array syntax

There is also the array syntax, which allows us to bind a list of classes.

<div :class="['selected', 'some-other-class']"></div>

We can use the object syntax in the array syntax like so:

<div :class="['some-class', { selected: isSelected }]"></div>

Using template strings:

<div :class="[`${dynamicClassName}`, { [`${dynamicClassName2}`]: isSelected }]"></div>

---

Edit:

Try the following if you want to use a template literal:

template: `
    <div :class="'c-' + column">
       ....
       <router-link :to="'/list/' + item.name"> test </router-link>
       ....
    </div>
  `,