vueでバインドした日付データをinputタグのdateタイプで初期値として表示したい

Question

javascripでの日付の扱いについて悩んでおり、ご相談させてください。
VueのV-modelでバインドした日付データをinputタグ（type="date"）内に初期値として表示させたいと思っています。形式はY-m-Dで表示させたいです。
バインドする日付データはPHPから渡しており、Datetimeクラスです。
以下のようなコードを書いたのですが、type="date"では初期値が表示されません。（type="text"では表示できます。）

html
<table>
<thead>
  <tr>
    <th>ID</th>
    <th>日付</th>
    <th></th>
  </tr>
</thead>
<tbody>
  <tr v-for="d in details">
    <td><!--ID-->
     <div>
       <span>{{ d.id }}</span>
     </div>
    </td>
    <td><!--日付-->
    　<div>
       <input type="date" v-model="d.date"/>　
      </div>
    </td>
    <td>
      <button type="button" @click="select(d.id)">変更</button>
    </td>
  </tr>
</tbody>
</table>

Vue側
 data: function () {
            return {
            	details: []
            };
        },
        //vueにはPHPからdetail(配列)を渡している
        created: function () {
            EventBus.$on('modal_open', function(detail){
                this.openModal(detail);
            }.bind(this));

PHPからVueに渡しているdetailsは以下のような構造です。
details = [
[id: 1, date: 2018-07-07 12:12:12 (DateTimeクラス)]
[id: 2, date: ....]
.....
}

何かお気づきの方おりましたら、教えていただけると幸いです。

Answer 1

入力欄に入力された日付の値を表す DOMString です。次のように、 value 属性に日付を入れることで、入力欄の既定値を設定することができます。

<input id="date" type="date" value="2017-06-01">

一つ注意するべき点として、表示される日付の形式は実際の value とは異なります。表示される日付の形式は、ブラウザーのロケールの設定に基づいて選択されますが、日付の value は常に yyyy-mm-dd の形式です。

https://developer.mozilla.org/ja/docs/Web/HTML/Element/Input/date

リンク先の情報によると、日付の形式がyyyy-mm-ddでないといけないようです。

demo

<form>
  <div>
    <label>正しい</label>
    <input type="date" value="2017-06-01">
  </div>
</form>

<form>
  <div>
    <label>誤り</label>
    <input type="date" value="2017-06-01 12:12:12">
  </div>
</form>

https://codepen.io/HayatoKamono/pen/ERqmwQ