作成日: 2024.04.13

Vue.js で style の値を動的に変更しようとしたら Identifier directly after number. とか Unexpected token, expected "," がでてうまくいかずに困った。

styleの値を動的に変更しようとしたところ、

[vite:vue] [plugin vite:vue] resources/js/Pages/Sample.vue (10:50): Error parsing JavaScript expression: Identifier directly after number. (1:31)

や、

[vite:vue] [plugin vite:vue] resources/js/Pages/Sample.vue (10:50): Error parsing JavaScript expression: Unexpected token, expected "," (1:107)

といったエラーが出てうまくいかず困った！

とりまシングルクォーテーションでくくれ！

styleの値を動的に変更しようとしたときに、以下のように特に動的に変更をしない top:20px;を追記したところ、

<div :style="{top: 20px, color: activeColor}"></div>

コンパイル時に、

[vite:vue] [plugin vite:vue] resources/js/Pages/Sample.vue (10:50): Error parsing JavaScript expression: Identifier directly after number. (1:31)

と出るようになって困った。

変数と実数を同時に使えないのかな？とかいろいろ悩んだが、シンプルに値をシングルクォーテーションでくくれば良いだけだった。

<div :style="{top: '20px', color: activeColor}"></div>

で、OK牧場と思っていたが、次に border-radius を追加したところ、

<div :style="{top: '20px', color: activeColor, border-radius: radius + '%';}"></div>

コンパイル時に、

[vite:vue] [plugin vite:vue] resources/js/Pages/Sample.vue (10:50): Error parsing JavaScript expression: Unexpected token, expected "," (1:107)

と違うエラーが。どうしたもんかな？と思ったらvue で動的に style を指定するときに、　ハイフン（-)があるとエラーになるらしい。
なので、今度は値じゃなくプロパティ名のほうの border-radius をシングルクォーテーションでくくってあげればよかった。

<div :style="{top: '20px', color: activeColor, 'border-radius': radius + '%';}"></div>

これでエラーがなくなった！
ちなみにプロパティ名にハイフンが含まれている場合は、ハイフンを消して次の値を大文字にすればシングルクォーテーションでくくらなくても良い。
具体的には border-radius を borderRadius にすればシングルクォーテーションは不要。

<div :style="{top: '20px', color: activeColor, borderRadius: radius + '%';}"></div>

以上！