VueJS v-bind not working with kebab-case

Question

I am working on a task list with Vue.JS (like everyone) and I've managed to add a task, show the tasks and even to delete the tasks. After that I was working on checking tasks and give them a class for success.

So I thought, if I have a data like class set to false, and use this line of code:

<div v-for="(task, index) in tasks" class="panel panel-default" :class="{panel-success: task.class}" :key="task">

I could set the class to true with a click event and give the particular class of panel-success (from bootstrap).

When I was doing that, I came up to the following problem:

avoid using JavaScript keyword as property name: "class" in expression :class="{panel-success: task.class}"

The problem was, the kebab case syntax of panel-success. When I changed the name to panelsuccess it was working. Why is kebab case not working?

Answer 1

The value for :class is a Javascript object, and in Javascript objects a kebab-case identifier is not valid, that's why you're having that error. For it to work, simply wrap your kebab-case identifier around single quotes:

:class="{'panel-success': task.class}"