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

2019/09/012019/09/23

現象

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

計算式として 1980 / 12 / 12 が評価されてた。（ 1980 ÷ 12 ÷ 12 ＝ 13.75 ）

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

  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> にそのまま渡される。

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

Posted by S