👏

【Vue】boolean型のプロパティに空文字を渡すと...？

2023/12/21に公開

Vue.js

tech

さて、早速ですがクイズです。

もし、以下のようなコードを書いたとして、boolプロパティの値はHelloWorldコンポーネント内ではどうなるでしょう？

空文字
true
false

<template>
  <HelloWorld :bool="''" />
</template>

<script>
import HelloWorld from './components/HelloWorld.vue';

export default {
  name: 'App',
  components: {
    HelloWorld,
  },
};
</script>

答えは、2のtrueです！

動作はこちらで試すことができます。

なぜ？

上記のテンプレートは以下のマークアップとして解釈されるらしいです。

<template>
  <HelloWorld bool="" />
</template>

これはHTMLだとbool属性はtrueとして扱われます。よって先ほどの結果になります。

意図しない場合は自分でキャストする必要がある

これが意図しない結果の場合は、以下のように自分でキャストする必要があります。

<template>
  <HelloWorld :bool="!!''" />
</template>

Vueにおいて、「プロパティの型に応じた自動キャストが起きる」という仕様は、押さえておいて損は無いと思いました。

ちなみに筆者的には「型エラーにはなるけど、空文字が渡ってくれる」という挙動が一番直観的だなあと思ってしまいます。

なぜ？

意図しない場合は自分でキャストする必要がある

Discussion