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

間違いや改善の指摘

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

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

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

質問ポリシー①

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

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

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

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

5-3

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

現在のパート (6)
全パート (72)
みんなで助け合おう!
現在のパートのディスカッション 全6件
5-3
ゲイリー 2021-03-24
:list="lists"について

エラーではないのですが、1点質問させてください。
ーーーーーーーーーーーーーーーーーー
Board.vueにて
<draggable :list="lists" class="list-index">

とありますが、これは
ドラッグ&ドロップされるたびにBoardコンポーネントのcomputedプロパティ

computed: {
...mapState([
'lists'
]),

が更新されるということでしょうか?
ーーーーーーーーーーーーーーーーーー
「:list="lists"」がどこのlistsを指しているか分からないため質問させて頂きました。

説明では「これで、ドラッグ&ドロップされるたびにコンポーネントのdataを更新できるようになりました。」とありますが、Boardコンポーネントにはdataプロパティはそもそも無いため、よく分からず質問いたしました。

以上、お手数をお掛けしますが宜しくお願いいたします。

5-3
mogy_h 2020-11-22
背景しか表示されなくなってしまう

発生している問題

他の方も質問していますが、背景しか表示されなくなってしまう

エラー画面をスクショで添付してください

6CD4C515-5C41-4083-B1E1-6ED8AE65FC7B.jpeg

試したこと

vuedraggableを使う前は問題なっかたので、章5-1,2のコードを削除したが、変わらない。
githubのコンポーネント部分とindex.jsをコピペしたが変わらずでした。
何かアドバイスいただけると助かります。よろしくお願いいたします。

5-3
gonz 2020-11-17
質問です

背景以外表示されなくなってしまいました。

Board.vueと App.vueでエラーが見つかったと表示されますが、原因が掴めない状況です。

consoleにてタイプエラーになっていたので完成版のコードをコピペしてみましたが、全く変わりません。

下記はエラーコードです。

[Vue warn]: Error in render: "TypeError: Cannot read property 'cards' of null"

found in

---> <Board> at src/components/Board.vue
<App> at src/App.vue
<Root>

5-3
退会ユーザー 2020-09-27
【エラー】Uncaught SyntaxError: Unexpected token u in JSON at position 0

発生している問題

Uncaught SyntaxError: Unexpected token u in JSON at position 0

エラー画面をスクショで添付してください

store/index.js

store.subscribe((mutation, state) => {
localStorage.setItem('trello-lists', JSON.stringify(state.lists))
})

「mutationのvalueが使われていない」と表示されます。
スクリーンショット 2020-09-27 10.08.14.png

試したこと

GitHubで確認して、直すところは直しましたが、特にエラー分に変化なしです。

5-3
田中 遥介 2020-07-26
質問です

画面が添付した画像のように背景色以外表示されなくなってしまった。
consoleを確認したところ下記エラーが発生しました。

タイポかと思い最終的なソースをコピペしてみましたが治らずといった状態でございます。
TypeErrorとなっているためどこかのタイポだと考えているのですがアドバイスいただけたらと思います。

Copied!
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "TypeError: Cannot read property 'cards' of null" found in ---&gt; at src/components/Board.vue at src/App.vue warn @ vue.runtime.esm.js?2b0e:619 logError @ vue.runtime.esm.js?2b0e:1884 globalHandleError @ vue.runtime.esm.js?2b0e:1879 handleError @ vue.runtime.esm.js?2b0e:1839 Vue._render @ vue.runtime.esm.js?2b0e:3550 updateComponent @ vue.runtime.esm.js?2b0e:4066 get @ vue.runtime.esm.js?2b0e:4479 Watcher @ vue.runtime.esm.js?2b0e:4468 mountComponent @ vue.runtime.esm.js?2b0e:4073 Vue.$mount @ vue.runtime.esm.js?2b0e:8415 init @ vue.runtime.esm.js?2b0e:3118 createComponent @ vue.runtime.esm.js?2b0e:5978 createElm @ vue.runtime.esm.js?2b0e:5925 createChildren @ vue.runtime.esm.js?2b0e:6053 createElm @ vue.runtime.esm.js?2b0e:5954 patch @ vue.runtime.esm.js?2b0e:6477 Vue._update @ vue.runtime.esm.js?2b0e:3945 updateComponent @ vue.runtime.esm.js?2b0e:4066 get @ vue.runtime.esm.js?2b0e:4479 Watcher @ vue.runtime.esm.js?2b0e:4468 mountComponent @ vue.runtime.esm.js?2b0e:4073 Vue.$mount @ vue.runtime.esm.js?2b0e:8415 init @ vue.runtime.esm.js?2b0e:3118 createComponent @ vue.runtime.esm.js?2b0e:5978 createElm @ vue.runtime.esm.js?2b0e:5925 patch @ vue.runtime.esm.js?2b0e:6516 Vue._update @ vue.runtime.esm.js?2b0e:3945 updateComponent @ vue.runtime.esm.js?2b0e:4066 get @ vue.runtime.esm.js?2b0e:4479 Watcher @ vue.runtime.esm.js?2b0e:4468 mountComponent @ vue.runtime.esm.js?2b0e:4073 Vue.$mount @ vue.runtime.esm.js?2b0e:8415 eval @ main.js?56d7:8 ./src/main.js @ app.js:1331 __webpack_require__ @ app.js:849 fn @ app.js:151 1 @ app.js:1356 __webpack_require__ @ app.js:849 checkDeferredModules @ app.js:46 (anonymous) @ app.js:925 (anonymous) @ app.js:928 Show 11 more frames vue.runtime.esm.js?2b0e:1888 TypeError: Cannot read property 'cards' of null at eval (index.js?4360:64) at Array.map () at totalCardCount (index.js?4360:64) at wrappedGetter (vuex.esm.js?2f62:877) at Vue.eval (vuex.esm.js?2f62:140) at Watcher.get (vue.runtime.esm.js?2b0e:4479) at Watcher.evaluate (vue.runtime.esm.js?2b0e:4584) at Vue.computedGetter [as totalCardCount] (vue.runtime.esm.js?2b0e:4836) at Object.get [as totalCardCount] (vuex.esm.js?2f62:667) at VueComponent.totalCardCount (Board.vue?01e0:36)

image