Vueでカスタムデータ属性（data属性）に'false'を渡したい 💻

<div :data-is-loading="isLoading" id="app"></div>

new Vue({
  el: '#app',
  data() {
    return {
      isLoading: false
    };
  }
})

と書くと、

<div data-is-loading="false" id="app"></div>

ではなく、

<div id="app"></div>

というHTMLが出力されます。
なぜならば、属性にfalseを渡すとその属性を描画しないという挙動だからです。
ちなみに、trueを渡した際はStringにキャストされて、

<div data-is-loading="true" id="app"></div>

となります。

jp.vuejs.org


なので、

<div id="app"></div>

と、

<div data-is-loading="true" id="app"></div>

を出し分けたい際には、

<div :data-is-loading="isLoading" id="app"></div>

new Vue({
  el: '#app',
  data() {
    return {
      isLoading: false
    };
  }
})

でOKなのですが、

<div data-is-loading="false" id="app"></div>

と、

<div data-is-loading="true" id="app"></div>

を出し分けたい際には、

<div :data-is-loading="String(isLoading)" id="app"></div>

という感じで、Stringにキャストするか、

<div :data-is-loading="isLoading ? 'true' : 'false'" id="app"></div>

という感じで三項演算子を使うと良いと思います。

new Vue({
  el: '#app',
  data() {
    return {
      isLoading: 'false' // 'true' or 'false'
    };
  }
})

と、データの方をStringにしても同じことができますが、なんとなく感覚的に表示側で調整した方が良い気がします。

'true'、'false'の場合はString()の方がスマートで、三項演算子の出番なんてあるのかと思いますが、

<div :data-is-loading="isLoading ? 'loading' : 'loadend'" id="app"></div>

new Vue({
  el: '#app',
  data() {
    return {
      isLoading: false
    };
  }
})

とか書けば、

<div data-is-loading="loadend" id="app"></div>

と、

<div data-is-loading="loading" id="app"></div>

となるなど、好きなテキストを入れられるので、dataとしてはBooleanで管理したいが、表示上は'true'、'false'じゃなくしたいときなどには便利なケースもあります。
ただ、この場合は、

new Vue({
  el: '#app',
  data() {
    return {
      isLoading: 'loading' // 'loading' or 'loadend'
    };
  }
})

と、データ側をStringにしても悪い気はしません。isLoadingというデータ名は変えた方が良い気がしますが。