VueJS v-bind가 kebab-case와 함께 작동하지 않음

VueJS v-bind가 kebab-case와 함께 작동하지 않음

저는 Vue와 작업 목록을 작성하고 있습니다.JS(모두와 마찬가지로)와 저는 작업을 추가하고, 작업을 표시하며, 심지어 작업을 삭제할 수 있었습니다.그 후, 과제를 체크해, 성공을 위한 수업을 실시했습니다.

그래서 저는 만약에 제가 이런 데이터를 가지고 있다면classfalse로 설정하고 다음 코드 행을 사용합니다.

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

내가 설정할 수 있는 것은class로.true클릭 이벤트와 함께 특정 클래스를 부여합니다.panel-success(부트스트랩에서).

그 때, 다음과 같은 문제가 발생했습니다.

표현식:class="{panel-Success: task.class}에서 JavaScript 키워드를 속성 이름으로 사용하지 않음

문제는 케밥 케이스 구문이panel-success이름을 바꿨을 때to panelsuccess효과가 있었어요케밥 케이스는 왜 작동하지 않나요?

의 값:classJavascript 객체이며 Javascript 객체에서는 kebab-case ID가 유효하지 않기 때문에 오류가 발생합니다.Kebab 케이스 식별자를 작은 따옴표로 둘러싸기만 하면 됩니다.

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

언급URL : https://stackoverflow.com/questions/43234537/vuejs-v-bind-not-working-with-kebab-case