Vuejs 2 Impossible To Interpolate Attribute Values

 <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?

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>
  `,