FIXED: V-bind invalid expression

I have thisistrue set to true in the data and bg-info works when I put it directly in class with mainrow - the syntax seems right…

Any ideas?

        <tbody>
          <tr class="mainrow" v-for="person in persons" v-bind:id="person.id" @dblclick="editrow(person)" 
                @click="selectrow($event)" v-bind:class="{bg-info:thisistrue}">
            <td>{{ person.name }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

- invalid expression: v-bind:class="{bg-info:thisistrue}"

may be kebab is invalid

1 Like

but class=“mainrow bg-info” worked…

oh, you mean a vue limitation?

It throws an error because { bg-info: true } in not a valid object. Object’s key cannot contain hyphen character unless it’s inside quotes:

v-bind:class="{ 'bg-info': thisistrue }

1 Like

that’s it - thank you sir!