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