JS フレームワーク Svelte にて 'type' attribute cannot be dynamic if input uses two-way binding というエラーが出た。
そのエラーの原因と対応。
原因
input タグの type を 変数として扱うとエラーが出る。
例えば下記コード。
<script>
export let type = ''
export let value = ''
</script>
<!-- エラー 'type' attribute cannot be dynamic if input uses two-way binding -->
<input type="{ type }" bind:value="{ value }">
button タグだとエラーが出ない。
<script>
export let type = ''
export let value = ''
</script>
<!-- エラーにならない -->
<button type="{ type }">{ value }</button>
input の type が変わると value の型が一部変わったり、扱う属性も変わったりするので、
type を動的に変更させたくなかったのではないかと思った。
対応
どうしても動的に扱いたい時は、
下記のように擬似的に動的に変更しているように見せる形になると思う。
<script>
export let type = ''
export let value = ''
</script>
{ #if type == 'text' }
<input type="text" bind:value="{ value }">
{ /if }
{ #if type == 'password' }
<input type="password" bind:value="{ value }">
{ /if }