VueJS v-bind无法使用kebab-case

Question

我正在使用Vue.JS（与所有人一样）处理任务列表，我设法添加任务，显示任务甚至删除任务。 之后我正在检查任务并给他们一个成功的课程。

所以我想，如果我有一个class设置为false的数据，并使用这行代码：

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

我可以通过click事件将class设置为true ，并给出特定的panel-success类（来自bootstrap）。

当我这样做时，我遇到了以下问题：

避免使用JavaScript关键字作为属性名称：表达式中的“class”：class =“{panel-success：task.class}”

问题是， panel-success的kebab案例语法。 当我将名称更改to panelsuccess它正在运行。 为什么烤肉串不起作用？

Answer 1

:class的值是一个Javascript对象，在Javascript对象中，一个kebab-case标识符无效，这就是你遇到这个错误的原因。 要使它工作，只需将kebab-case标识符包装在单引号周围：

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