[Laravel][Vue.js]Bladeから日付をセットしているのに変な数値(小数とか)が渡ってくる

2019/09/01

現象

“1980/12/12” って日付を渡してるはずなのに Vue 側で 13.75 とか表示されてしまう。

結論

計算式として 1980 / 12 / 12 が評価されてた。( 1980 ÷ 12 ÷ 12 = 13.75 )

詳細

Blade側
Vue側
v-bindで変数にバインドしてるし、props で型指定もしてるのになぁ…。

beforeCreate のタイミングとかで調査してみても、やはり計算後の値が渡ってきている。そもそも

みたいに怒られているので、 Vue にわたる時点で13.75になってるっぽい。

とは言え、php で取得した時点の値を確認してみても

ってなってるので問題なさそうなんだよなぁ…。

いろいろ試している中で、コロンを消したら行けました(-_-;)

 

:によって Vue の v-bind が設定され、=の右辺が「JavaScriptとして評価」される。

:を取ってやれば、単なる html の属性となって、右辺はただの文字列として <mycomponent> にそのまま渡される。

と言う訳で、こういうことになるんですね…。