⚙️ 今日の積み上げ_ENJIN-211230
作成日: 2021/12/30
4

教材名

Vue.js/Vuexを使ってTrello風アプリを作成しよう!

4.Cardを作成できるようにしよう

4-2.Cardコンポーネントを作成しよう

4-2-1. 作成したカードを表示しよう(Card.vue)

とりあえずなんとなく読みつつ貼り付け完了

4-2-2. 作成したカードを表示しよう(List.vue)

ヨシッッッ
スクリーンショット 2021-12-30 14.20.15.png

4-2-3. カードを削除できるようにしよう

DEKITAZO!!!
スクリーンショット 2021-12-30 14.22.30.png

4-3.カードの総数を取得しよう

4-3-1. リスト内のカードの総数を表示しよう(List.vue)

DEKETA
スクリーンショット 2021-12-30 14.27.32.png

4-3-2. 全体のカードの総数を表示しよう(Board.vue)(store/index.js)

総数みえたああああうれしい!!!
スクリーンショット 2021-12-30 14.30.53.png

5.ドラッグ&ドロップ機能を追加しよう

5-1. ## ドラッグ&ドロップ機能を追加しよう

Vue.DraggableをDLできているのかどうなのか 微妙 OF THE CHIKEN

5-2. Cardのドラッグ&ドロップ機能を実装しよう

5-2-1. カードをリスト内でドラッグ&ドロップで移動できる機能を実装しよう(List.vue)

あなた!動いたわ!!(初胎動のテンション)
スクリーンショット 2021-12-30 15.11.07.png

5-2-2. カードをリスト間でもドラッグ&ドロップで移動できる機能を実装しよう(List.vue)

((((元気に動いてる))))
スクリーンショット 2021-12-30 15.13.26.png

次回やる

5.ドラッグ&ドロップ機能を追加しよう

5-2. Cardのドラッグ&ドロップ機能を実装しよう

5-2-3. 移動したカードの並び順を保存できるようにしよう

一瞬のつまずき

いつから2ついたんだよ…Add New Listさん…
次回は原因を探そう…
と思ったら!すぐ見つかったああああ
Board.vue内で謎に下記コードが2回挟まってた。1つ消そう、そうしよう。

<list-add />

スクリーンショット 2021-12-30 14.07.10.png


アプリを作ってみたいウェブデザイナー。