📄

【Vue3】v-bindの真偽値判定で属性値を削除しない

1 min read

概要

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の名前入れといて欲しかったなー。

https://v3.ja.vuejs.org/guide/migration/attribute-coercion.html#概要

Discussion

ログインするとコメントできます