Web技術速習テキスト の写経が大体終わったので
自分でもいろいろ書いていきたいと思います。
リンク
まずは自分用スケジュールアプリです。
カレンダーの日付を選択すると、登録済みの予定が一覧表示でき、
追加や削除も可。というシンプルなものにします。
作成したのがこちら
<template>
<v-app>
<v-layout>
<v-flex>
<v-date-picker v-model="picker"></v-date-picker>
</v-flex>
<v-flex>
<v-list>
<v-list-item v-for="i in items" :key="i.id">
<v-list-item-title>{{i.title}}</v-list-item-title>
</v-list-item>
</v-list>
</v-flex>
</v-layout>
</v-app>
</template>
<script>
let dummyData=[{id:"1",date:"2022/06/20",title:"テストスケジュール１"},
{id:"2",date:"2022/06/20",title:"テストスケジュール２"},
{id:"3",date:"2022/06/19",title:"テストスケジュール３"},
];
export default{
data(){
return{
picker:new Date().toISOString().substr(0,10),
itemsData:dummyData
}
},
computed:{
items(){
console.log(this.itemsData[0].date);
console.log(this.picker)
// return this.itemsData;
return this.itemsData.filter(i=>i.date == this.picker);
}
}
}
</script>
これを動かしたのですが、まあ、登録したダミーデータが出ないでない。
itemsメソッドでreturnするものを、フィルターを使わず、
this.itemsDataのみにすると出てきます。
ということはフィルターがおかしい。
しかし、指定の仕方は、Web技術速習テキスト でも使われていた方法で
実際に動いていたから問題ないはず。
これで数時間ハマってしまいました。
原因は、ダミーデータでした。
日付を yyyy/mm/dd にしていたのですが、
Date pickers（デートピッカー）は yyyy-mm-dd でした。
つまり、、
let dummyData=[{id:"1",date:"2022-06-20",title:"テストスケジュール１"},
{id:"2",date:"2022-06-20",title:"テストスケジュール２"},
{id:"3",date:"2022-06-19",title:"テストスケジュール３"},
];
と変更するとちゃんと動きました。
本サイトのDate pickersを見たときは、
日付フォーマットってあまり語られてないような、、、
これが普通なのかな、、、