教材の内容に関係のない質問や教材とは異なる環境・バージョンで進めている場合のエラーなど、教材に関係しない質問は推奨していないため回答できない場合がございます。
その場合、teratailなどの外部サイトを利用して質問することをおすすめします。教材の誤字脱字や追記・改善の要望は「文章の間違いや改善点の指摘」からお願いします。
作成したリストとカードを上下左右にドラッグ&ドロップすると「Error in render: "TypeError: Cannot read properties of undefined (reading 'map')"」といったエラーが発生し、localStrageがundefindになってしまい、画面をリロードすると画面が真っ白になってしまいます。
カリキュラムと自分のコードを見直し、ほかのブラウザでも見てみましたが(FireFox)同じような現象が発生してしまいます。store/index.jsの記述の仕方が問題でしょうか?それともdraggableが原因なのかわからない状況です。ご回答いただけると幸いです。
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.vue123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960 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>
何か設定が間違っているのでしょうか?
お手数ですがよろしくお願いいたします
CardAddコンポーネントを<draggable>の直下に置くのはなぜでしょうか。CardAddコンポーネントはドラッグできるようにする必要はないと個人的に感じたのですが、特別な理由があるのでしょうか。
お手数ですが、ご返信いただければ幸いです。
私も炭治郎さんと同じ箇所が分からないです。
「draggableコンポーネントはpropsの1つとして、listプロパティを受け取ります。
listプロパティはコンポーネントがドラッグ&ドロップされるたびに定義されたcardsのデータを更新してくれます。」と言うような記述がありましたが、
このlistプロパティはどこからきているのでしょうか。
よろしくお願いします。
お世話になっております。
@end="$emit('change')"について質問させてください。
$emit('change')で「changeイベント」を親コンポーネントに渡していますが、
素人目にはただ「change」という文字列を渡しているように見えてしまいます。
イベントの場合と、文字列の場合で明確に書き分ける方法などがあるのでしょうか?
それともどちらも書き方は同じで、親コンポーネントでどう使用するかで、渡したものの意味が決まるのでしょうか?
どうぞよろしくお願い致します。