論理属性をVueでバインディングする

フロントエンド

<button type="button" disabled>送信</button> のように、disabled属性をVueで制御したい。

これを実現するには以下のようにv-bindを利用する

<script setup lang="ts">
import {ref} from "vue";
const isButtonDisabled = ref(true);
</script>

<template>
  <button v-bind:disabled="isButtonDisabled">Button</button>
</template>

これにより、isButtonDisabled がtruthyの場合は disabled属性が設定され、 falthyの場合は disabled属性は取り除かれる。

ja.vuejs.org

HTMLにおいてdisabled属性は論理属性の一種で、trueかfalseの値を取る。 また、disabled属性が存在すればtrue、存在しなければfalseと解釈される。そのためMDNに記載の通り、どのような値を指定してもtrueと解釈される。

<!-- 以下はすべてクリック不可能なボタンとしてレンダリングされる -->
<button type="button" disabled>送信</button>
<button type="button" disabled="">送信</button>
<button type="button" disabled="true">送信</button>
<button type="button" disabled="false">送信</button>
<button type="button" disabled="any value">送信</button>

<!-- 以下はクリック可能なボタンとしてレンダリングされる
<button type="button">送信</button>

実際、vueで isButtonDsiabled にfalseを指定した場合のみdisabled属性は取り除かれて選択可能なボタンとしてレンダリングされる。 trueや"any value"、"disabled"などの値をしてもすべて選択不可能なボタンとしてレンダリングされる。

developer.mozilla.org

試してみたところ、Chromeでは値を指定しない <button type="button" disabled> としてレンダリングされ、Firefoxでは値を空文字で指定した <button type="button" disabled="">としてレンダリングされた。Firefoxにて空文字指定でレンダリングされるのは、trueやその他の文字列を指定した場合でも同様で、指定した値自体は無視された。