Vue.jsを使用したフォームで、フラグによってrequired属性の出力を振り分ける

表現が難しいですが、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を始めとするcheckedselected、あるいは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">

ずっと悩んでいたので、ようやく一つ課題をクリアできました……。

この記事を書いた人

アバター

アルム=バンド

フルスタックエンジニアっぽい何か。LAMPやNodeからWP、gulpを使ってejs,Scss,JSのコーディングまで一通り。たまにRasPiで遊んだり、趣味で開発したり。