vue.jsでv-forのkeyに応じてclassを切替えたい。

Question

###前提・実現したいこと
vue.js で　v-for で v-bind:class を切替えたいと思い下記のコードを書きました。
2列のtd を出力していますが、一部のTDにのみ class 属性を付けたいのですがうまくいきません。

追記：書き方を変えてうまくいきましたが、下記のやり方では、

<td class> となってしまいます。

###期待するHTML

<tr>
  <td>1</td><td class="student_outer">A</td>
  <td>2</td><td class="student_outer">B</td>
</tr>

###該当のソースコード

Vue.component('student-list', {
    template: `
    <table>
        <tbody>
        <tr v-for="student in students">
            ### 初回質問時
            <td v-for="(value, key) in columns" v-bind:class="{student-outer: key==='student_name'}">
            ### 質問更新時
            <td v-for="(value, key) in columns" v-bind:class="[key==='student_name' ? 'student_outer' : '']">
                {{ student[key] }}
            </td>
        </tr>
        </tbody>
    </table>
    `,
    data: function () {
        var loading = true;
        var title = '';
        var columns = {
            id: 'ID',
            student_name: '生徒氏名',
        };
        return {
            loading: loading,
            title: title,
            columns: columns,
            students: [],
        }
    },
...................
/* students は以下のように別でセット。
students = [
{ "id":1 , "student_name": "A"},
{ "id":2 , "student_name": "B"},
]
*/

###Console でのエラーメッセージ

Raw expression: v-bind:class="{student-outer: key==='student_name'}"

###補足情報(言語/FW/ツール等のバージョンなど)
https://unpkg.com/vue v2.5.7

Answer 1

これで通りませんか？

<td v-for="(value, key) in columns" :class="{student_outer:  key === 'student_name'}">

Comments

[KatOs]

通りました。ありがとうございます。ただ私にとっては謎が深まりました。
ハイフンは「ケバブスタイル」だから、特別扱いされているのでしょうか? 結局
NG
<td v-for="(value, key) in columns" :class="{student-outer: key === 'student_name'}">
OK
<td v-for="(value, key) in columns" :class="{'student-outer': key === 'student_name'}">
OK
<td v-for="(value, key) in columns" :class="{student_outer: key === 'student_name'}">
OK
<td v-for="(value, key) in columns" v-bind:class="[key==='student_name' ? 'student_outer' : '']">
という結果でしたが、いずれも、
<td class>1</td><td class="student_outer">A</td>
または、
<td class>1</td><td class="student-outer">A</td>
と 空のclass 属性が入ります。そういうものでしょうか？

```

Answer 2

v-bindなど、vueのバインド対象になっているattributeの値は、""で括られていても、
jsの扱いを受けますので、「-」など変数名で扱えないものは、文字列のハッシュ値として扱います。

なので下記のようなことになります。

// OK
{student_name :  key === 'student_name'}
// 変数名に_は使える
var student_name = key === 'student_name'

// NG
{student-outer: key === 'student_name'}
// 変数名に-は使えないのでエラーが出るはず
var student-outer = key === 'student_name'

尚、蛇足ですがインラインのバインディングは下記が参考になります。
https://jp.vuejs.org/v2/guide/class-and-style.html

Comments

[KatOs]

助かりました。ありがとうございます。javascript では変数などにハイフンが使えないのでしたね。他言語がごっちゃになったようです。