Web技術速習テキスト いいですね。見るのが楽しみです。
リンク
読む順番がバラバラで、興味のある所からやっていますが、
わからなくなったら前のページに戻ればちゃんと説明が書いてあるので
安心して好きな章から進めることができます。
今回は ６．３ スケジュールアプリ です。
早速写経から。
Vuetifyを使いますが、ついVuejsのver3を選択してしまい、
vue add vuetify でエラー。
気を取り直して、ver2でvue createしたものを再作成して今度は成功。
まずはFirebaseに接続する前で動くものを作ります。
写経して、、、どうだ
おお。
見た目がいいですね。
カレンダーが標準の機能で使えるなんてステキ。
「ADD」はスケジュール追加かな。押してみます。
カチ
・・・
カチ
・・・
カチカチカチカチカチカチカチカチカチカチカチカチ
だめだうごかない。
まあこんな時は焦らずF12だ
「コンソール」に何か出ていないか見てみます。
console.ts?ac2a:39 [Vuetify] The activator slot must be bound, try '<template v-slot:activator="{ on }"><v-btn v-on="on">'
found in
---> <VDialog>
<VPicker>
<VDatePicker>
<VApp>
<App> at src/App.vue
<Root>
んん？
なんかタイプミスしたか？
念のため、本サイトの解答ソースを使ってやっても同じ状況。
何が悪いのか、、、
、、、
、、、
結局半日かかりました。
答えは本サイトにありました。
https://vuetifyjs.com/ja/getting-started/upgrade-guide/#activator
#通常のアクティベーター
<v-dialog>
<v-btn slot="activator">...</v-btn>
</v-dialog>
<v-dialog>
<template v-slot:activator="{ on }">
<v-btn v-on="on">...</v-btn>
</template>
</v-dialog>
書籍の書き方はv1.5 で、
現時点でvuetifyをインストールすると、v2.0で書かないといけない模様。
ですので該当部分をいかに修正
□修正前
<v-btn slot="activator" absolute dark fab bottom right
color="pink">
<v-icon>add</v-icon>
</v-btn>
□修正後
<template v-slot:activator="{ on }">
<v-btn v-on="on"><v-icon>add</v-icon></v-btn>
</template>
さらにこれだけだとだめで v-btn の属性も変更が必要でした。
<v-btn color="primary" flat
@click="dialog = false">cancel</v-btn>
<v-btn color="primary" flat
@click="saveItem">save</v-btn>
□修正後
<v-btn color="primary" text
@click="dialog = false">cancel</v-btn>
<v-btn color="primary" text
@click="saveItem">save</v-btn>
さあ、どうだ、、、？
ADDボタンが若干寂しくなったが、コンソールのエラーは出なくなった。
ADD押してみる！
色々書いてSAVEしてもちゃんと残る！
ちょっと追加したスケジュールの位置やDELETEボタンの位置・表示があれですが
とりあえず動きました。
vue.js や vuetify はまだまだ進化中のため、
書籍で書かれていた書き方が、すぐに動かなくなる可能性があります。
ここで考え方がわかれるでしょう。
１．学んでも使えなくなるんだったら、
安定したバージョンになってから勉強すればいい
２．学んでも使えなくなるぐらい動きの激しいものだったら、
最新情報に触れているはず。
動かなくなってもめげずに追い続ける。
今までは１．の考え方だったのですが、今は２．の考え方に変わりました。
引き続き
この本をもとにvue.js vuetifyを追っていこうと思います。
いつ対象外になるかわかりませんので
内容が気になる方で迷っている方は、
※一応今回の修正で動くのですが、スケジュール登録したらコンソールがこんなことに
調べてみると、、、こちら
https://github.com/vuetifyjs/vuetify/issues/8701
こんなに変えていいのか？
前のバージョンの人たちは困らないのか？
なんで名前変えたの？
色々ツッコミどころ満載。
とりあえずわかる範囲で名前修正してみます。
□修正前
<v-list-tile v-for="i in items" :key="i.id">
<v-list-tile-content>
<v-list-tile-title>{{i.title}}</v-list-tile-title>
</v-list-tile-content>
<v-list-tile-action>
<v-btn @click="delItem(i.id)">
<v-icon color="pink">delete</v-icon>
</v-btn>
</v-list-tile-action>
</v-list-tile>
□修正後
<v-list-item v-for="i in items" :key="i.id">
<v-list-item-content>
<v-list-item-title>{{i.title}}</v-list-item-title>
</v-list-item-content>
<v-list-item-action>
<v-btn @click="delItem(i.id)">
<v-icon color="pink">delete</v-icon>
</v-btn>
</v-list-item-action>
</v-list-item>
「～tile～」を「～item～」に変えただけ。
さあ、これでADDしてみても、、、
エラーが出ない！
表示もこんな感じで位置がいい感じに調整されています。
