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