📄
【Vue3】v-bindの真偽値判定で属性値を削除しない
概要
Vue2までv-bindで、属性値に対して真偽値をbindしていた場合、
真なら属性が追加
偽なら属性が削除
されていたものが、Vue3からは常に削除されないので、
disabled等の一部属は常に出力されて効果が発揮されるので注意。
詳細
butttonの活性、非活性の例。
<template>
<button :disabled=isDisabled>
</template>
<script>
const isDisabled = false;
</script>
Vue2でのHTML出力
ボタンの活性、非活性が切り替わります。
// isDisabledがtrue
<button disabled>
// isDisabledがfalse
<button>
Vue3でのHTML出力
disabledが常に追加されているため、ボタンが常に非活性状態に。
// isDisabledがtrue
<button disabled="true">
// isDisabledがfalse
<button disabled="false">
Vue3での対処法
Vue3で属性を追加、削除したい場合はnull か undefindを渡す必要があります。
// isDisabledがtrue
<button disabled="true">
// isDisabledがnull or undefind
<button>
参考マニュアル
確かにマイグレーションガイドにあったのですが、
この項目をあんまり気にしてなかった故、見逃してました...
項目名にv-bindの名前入れといて欲しかったなー。
Discussion