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的烤肉串案例语法。当我更改名称to panelsuccess时，它正在运行。为什么烤肉串不起作用？

Answer 1

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

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