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

2019/09/01

現象

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

結論

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

詳細

Blade側
<mycomponent :birthday={{$birth}}></mycomponent>
Vue側
  props: {
    birthday: String,
  }

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

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

[Vue warn]: Invalid prop: type check failed for prop "birthday". Expected String with value "13.75", got Number with value 13.75.

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

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

'birthday' => string '1980/12/12' (length=10)

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

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

<mycomponent birthday={{$birth}}></mycomponent>

 

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

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

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