カテゴリー
サインイン 新規登録

間違いや改善の指摘

内容の技術的な誤り・誤字脱字やミスのご報告・解説やトピックの追記/改善のご要望は教材をさらに良くしていく上でとても貴重なご意見になります。

少しでも気になった点があれば、ご遠慮なく投稿いただけると幸いです🙏

実際には誤りではなく勘違いであっても、ご報告いただけることで教材のブラッシュアップにつながります。

質問ポリシー①

教材受講者みなさんのスムーズな問題解決のために、心がけていただきたいことがあります。

教材の内容に関する質問を投稿しましょう

教材の内容に関係のない質問や教材とは異なる環境・バージョンで進めている場合のエラーなど、教材に関係しない質問は推奨していないため回答できない場合がございます。

その場合、teratailなどの外部サイトを利用して質問することをおすすめします。教材の誤字脱字や追記・改善の要望は「文章の間違いや改善点の指摘」からお願いします。

5-2

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

現在のパート (6)
全パート (72)
みんなで助け合おう!
現在のパートのディスカッション 全6件
5-2
こずぅ 2021-12-07
カードとリストをドラッグ&ドロップするとエラーが発生します。

発生している問題

作成したリストとカードを上下左右にドラッグ&ドロップすると「Error in render: "TypeError: Cannot read properties of undefined (reading 'map')"」といったエラーが発生し、localStrageがundefindになってしまい、画面をリロードすると画面が真っ白になってしまいます。

image01.png

試したこと

カリキュラムと自分のコードを見直し、ほかのブラウザでも見てみましたが(FireFox)同じような現象が発生してしまいます。store/index.jsの記述の仕方が問題でしょうか?それともdraggableが原因なのかわからない状況です。ご回答いただけると幸いです。

5-2
morioka1206 2021-09-14
vuedraggableをインストールした後コンパイルエラーになりました。

vuedraggableをインストールして、templateなどに記述した後に

Copied!
ERROR Failed to compile with 9 errors 14:34:59 These dependencies were not found: * core-js/modules/es.array.filter.js in ./node_modules/@babel/runtime/helpers/esm/objectSpread2.js * core-js/modules/es.array.map.js in ./src/store/index.js * core-js/modules/es.array.splice.js in ./src/store/index.js * core-js/modules/es.number.constructor.js in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/List.vue?vue&type=script&lang=js& * core-js/modules/es.object.get-own-property-descriptor.js in ./node_modules/@babel/runtime/helpers/esm/objectSpread2.js * core-js/modules/es.object.get-own-property-descriptors.js in ./node_modules/@babel/runtime/helpers/esm/objectSpread2.js * core-js/modules/es.object.keys.js in ./node_modules/@babel/runtime/helpers/esm/objectSpread2.js * core-js/modules/es.symbol.js in ./node_modules/@babel/runtime/helpers/esm/objectSpread2.js * core-js/modules/web.dom-collections.for-each.js in ./node_modules/@babel/runtime/helpers/esm/objectSpread2.js To install them, you can run: npm install --save core-js/modules/es.array.filter.js core-js/modules/es.array.map.js core-js/modules/es.array.splice.js core-js/modules/es.number.constructor.js core-js/modules/es.object.get-own-property-descriptor.js core-js/modules/es.object.get-own-property-descriptors.js core-js/modules/es.object.keys.js core-js/modules/es.symbol.js core-js/modules/web.dom-collections.for-each.js

というエラーが発生しました。

List.vue
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
Copied!
<template> <div class="list"> <div class="listheader"> <p class="list-title">{{title}}</p> <p class="list-couter">total: {{totalCardList}}</p> <div class="deletelist" @click="removeList">x</div> </div> <draggable> <card v-for="(item,index) in cards" :body="item.body" :key="item.id" :cardIndex="index" :listIndex="listIndex" /> </draggable> <card-add :listIndex="listIndex" /> </div> </template> <script> import draggable from 'vuedraggable' import CardAdd from './CardAdd' import Card from './Card' export default { components: { draggable, CardAdd, Card, }, props: { title:{ type: String, required: true }, cards:{ type: Array, required: true }, listIndex: { type: Number, required: true } }, computed: { totalCardList() { return this.cards.length } }, methods: { removeList() { if(confirm('本当にこのリストを削除しますか?')){ this.$store.dispatch('removelist', {listIndex: this.listLindex}) } } }, } </script>

何か設定が間違っているのでしょうか?
お手数ですがよろしくお願いいたします

5-2
伊藤拓海 2021-01-15
質問です

CardAddコンポーネントを<draggable>の直下に置くのはなぜでしょうか。CardAddコンポーネントはドラッグできるようにする必要はないと個人的に感じたのですが、特別な理由があるのでしょうか。

お手数ですが、ご返信いただければ幸いです。

5-2
テリーマン 2020-10-04
質問です。

私も炭治郎さんと同じ箇所が分からないです。

「draggableコンポーネントはpropsの1つとして、listプロパティを受け取ります。
listプロパティはコンポーネントがドラッグ&ドロップされるたびに定義されたcardsのデータを更新してくれます。」と言うような記述がありましたが、
このlistプロパティはどこからきているのでしょうか。

よろしくお願いします。

5-2
りょへ 2020-08-15
@end="$emit('change')"につきまして

お世話になっております。
@end="$emit('change')"について質問させてください。

$emit('change')で「changeイベント」を親コンポーネントに渡していますが、
素人目にはただ「change」という文字列を渡しているように見えてしまいます。

イベントの場合と、文字列の場合で明確に書き分ける方法などがあるのでしょうか?

それともどちらも書き方は同じで、親コンポーネントでどう使用するかで、渡したものの意味が決まるのでしょうか?

どうぞよろしくお願い致します。