Vueのv-bind:disabledで条件式（&&)を使いたい

Question

Vueで管理画面のようなものを作成しています。
その時、条件に一致していない場合は非アクティブ（押せない状態、disabled）にしたいと思っています。

isAfter（computed）とthis.auto_startup（data）が両方trueだったら
disabledにしたいです。
いろいろ調べたのですが、どのサイトもv-bind:styleやv-bind:classでの記述方法しかなかったので解決できませんでした。
条件式の記載方法を教えて頂けないでしょうか？

よろしくお願いいたします。

<button v-bind:disabled="this.auto_startup && isAfter" v-on:click="setAutoStartup">セットする</button>

Comments

[NozomuIkuta]

JavaScriptも記載できますか？ -> 無視してください。

Answer 1

テンプレートのバインドは、JavaScriptの「式」であればいいので、
質問にあるような「&&」も使用できます。

サンプル

参考資料

公式ドキュメント該当箇所

Comments

[HiroshiSato]

ありがとうございます。お陰様で解決しました。
公式ドキュメントも全て目を通したのですが、&&や||の記載が無かったので早々にGoogleなどで探し始めたのが間違いでした。
「式」と書かれているので、&&も||もよくよく考えてみたら「式」ですね。

なぜうまく動作していなかったかというと、「this.auto_startup」がtrueだったら常に押せなくしたい＝&&だと勝手に勘違いしていました。どう考えても「||」を用いるべきですね。

それに重なってdisabledという否定の属性なのでtrueで押せなくなる？アレ？falseで押せなくなる？というような事で頭が混乱していたのも原因です。

サンプルの処理も作ってくださって大変助かりました。

ありがとうございました。

[NozomuIkuta]

解決したようでよかったです。
公式サイトにサンプルがないと迷いますよね。
迷ったら、サンプルに使ったサイトなどで試してしまうのが早いかもしれません。
もちろん、ドキュメントを見つけるのは大事ですが