Vue.jsで、クラスを動的につけたいが、クラス名にブラケット（[）が付いている場合、動作しない。

Question

お世話になります。

Vue.jsにて、動的にCSSのクラスをつけよう（v-bind:class）としましたが、
クラス名に、ブラケットが入ってる場合、動作もしません。（consoleのエラーもでません。）
クラス名のエスケープはどうやったらできますでしょうか。

<input v-bind:class="{ validate[required]: class.isRequired }">

以下だったら、動作します。

<input v-bind:class="{ validate: class.isRequired }">

いろいろエスケープ文字試してみたのですが、できなかったので、かっこ悪い書き方ですが、
以下のように、classの文字列を返すメソッドで対応します。

...
<input type="text" :class="type1Class()">
...
    methods: {
        type1Class: function () {
            return this.class.isRequired ? "some_class validate[required]" : "some_class"
        }
    }

エスケープの仕方はまだ募集させてください！

Answer 1

<input v-bind:class="{ 'validate[required]': true }">

で、どうでしょう。

JSにおいてvalidate[required]はvalidateオブジェクトのrequiredプロパティを参照してます。
そのため、空と演算されてしまったのですね。

外でダブルクオートを使っているため、シングルクオートで囲むことで文字列としました。

Comments

[usop]

'<input v-bind:class="{ \'validate[required]\': true }">'
（最初のシングルコーテーションは、親子のタグをつなぎ合わせている）
↑でうまくいきました！ありがとうございます！