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?

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?

• javascript
• vue.js
• vuejs2

Share Follow edited Apr 5, 2017 at 14:48 Giesburts asked Apr 5, 2017 at 14:45 GiesburtsGiesburts 7,6761616 gold badges5252 silver badges9292 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

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