表現が難しいですが、HTMLの
input要素があったとします。Vue.jsのコンポーネントを使用して、下記のように書いたとします。
<input type="text" class="form-control" :name="InputKey" :id="InputKey" :placeholder="this.placeholder ? this.placeholder : '']" v-model="value">
これに、フラグ(Boolean値の変数)によって
required属性を付与するか、あるいはしないのかを振り分けたいとします。
今回、私は下記のように書きました。
<input type="text" class="form-control" :name="InputKey" :id="InputKey" :placeholder="this.placeholder ? this.placeholder : '']" v-model="value" :required="[this.required ? 'required' : '']">
最後の
:required="[this.required ? 'required' : '']"がそれですね。ただ、この書き方だと上手く機能しません。
というのは、確かに属性値は振り分けて
required="required"とそうでない場合、と場合分けはできるのですが、値がなくても属性そのものは書き出されてしまうので、
requiredが出力されてしまう。
requiredを始めとする
checkedや
selected、あるいは
disabledなどは値がなく属性だけでも効力を発揮します。……つまり、
trueの場合の
required="required"だろうが、
falseの場合の
requiredだろうが結局必須扱いになってしまうのです。
これでは意味がない、ということで色々悩みましたが、最終的にTwitterでアドバイス頂いた
:required="this.required ? true : false"という大括弧がなく、
trueまたは
falseで書き分ける三項演算子の書き方で上手く行くことが分かりました。
<input type="text" class="form-control" :name="InputKey" :id="InputKey" :placeholder="this.placeholder ? this.placeholder : '']" v-model="value" :required="this.required ? true : false">
ずっと悩んでいたので、ようやく一つ課題をクリアできました……。
アルム＝バンド