質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Q&A

1回答

3800閲覧

[Vue.js] Cannot read property 'id' of undefined"を解消できません[Nuxt.js]

jime1234567

総合スコア3

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

0グッド

0クリップ

投稿2020/12/11 03:46

Nuxt.js初学者で技術書を参考にしながらアプリを作っています。

タイトルにある通り

Cannot read property 'id' of undefined"

というエラーが出てしまいアプリをブラウザで表示できないという状況に陥っています。

発生している問題・エラーメッセージ

上記以外にもコマンドの方に

[Vue warn]: Property or method "formData" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties. found in ---> <TheHeader> at app/components/TheHeader.vue <App/layouts/default.vue> at app/layouts/default.vue <Root>

というエラーメッセージと

[Vue warn]: Error in render: "TypeError: Cannot read property 'id' of undefined" 11:54:19 found in ---> <TheHeader> at app/components/TheHeader.vue <App/layouts/default.vue> at app/layouts/default.vue <Root>

というエラーメッセージが出ています。

また、Chromeの検証機能を使ってみたところ

Failed to load resource: the server responded with a status of 500 (RuntimeError)

というサーバー側のエラーが出ていました。

該当のソースコード

**app/store/index.js** import moment from '~/plugins/moment' export const state = () => ({ isLoggedIn: false, user: null }) export const getters = { isLoggedIn: state => state.isLoggedIn, user: state => (state.user ? Object.assign({ likes: [] }, state.user) : null) } export const mutations = { setUser(state, { user }) { if (user.id.match(/_|@|./)) { throw new TypeError('invalid username') } state.user = user state.isLoggedIn = true }, updateUser(state, { user }) { state.user = user } } export const actions = { async login({ commit }, { id }) { if (id.match(/_|@|./)) { throw new TypeError('invalid username') } const user = await this.$axios.$get(`/users/${id}.json`) console.log(user) if (!user.id) throw new Error('Invalid user') commit('setUser', { user }) }, async register({ commit }, { id }) { const payload = {} payload[id] = { id } await this.$axios.$patch(`/users.json`, payload) const user = await this.$axios.$get(`/users/${id}.json`) if (!user.id) throw new Error('Invalid user') commit('setUser', { user }) }, async addLikeLogToUser({ commit }, { user, post }) { user.likes.push({ created_at: moment().format(), user_id: user.id, post_id: post.id }) const newUser = await this.$axios.$put(`/users/${user.id}.json`, user) commit('updateUser', { user: newUser }) }, async removeLikeLogToUser({ commit }, { user, post }) { user.likes = post.likes.filter(like => like.user_id !== user.id) || [] const newUser = await this.$axios.$put(`/users/${user.id}.json`, user) commit('updateUser', { user: newUser }) } }
**app/store/user.js** export const state = () => ({ users: [] }) export const getters = { users: state => state.users } export const mutations = { addUser(state, { user }) { state.users.push(user) }, addUserPost(state, { user, post }) { state.userPosts[user.id].push(post) }, clearUserPosts(state, { user }) { state.userPosts[user.id] = [] } } export const actions = { async fetchUser({ commit }, { id }) { const user = await this.$axios.$get(`/users/${id}.json`) commit('addUser', { user }) }, async addLikeLogToUser({ commit }, { user, post }) { post.likes.push({ created_at: moment().format(), user_id: user.id, post_id: post.id }) const newPost = await this.$axios.$put(`/posts/${post.id}.json`, post) commit('updatePost', { post: newPost }) }, async removeLikeLogToUser({ commit }, { user, post }) { post.likes = post.likes.filter(like => like.user_id !== user.id) || [] const newPost = await this.$axios.$put(`/posts/${post.id}.json`, post) commit('updatePost', { post: newPost }) } }
**app/store/users.js** export const state = () => ({ users: [] }) export const getters = { users: state => state.users } export const mutations = { addUser(state, { user }) { state.users.push(user) }, addUserPost(state, { user, post }) { state.userPosts[user.id].push(post) }, clearUserPosts(state, { user }) { state.userPosts[user.id] = [] } } export const actions = { async fetchUser({ commit }, { id }) { const user = await this.$axios.$get(`/users/${id}.json`) commit('addUser', { user }) }, async addLikeLogToUser({ commit }, { user, post }) { post.likes.push({ created_at: moment().format(), user_id: user.id, post_id: post.id }) const newPost = await this.$axios.$put(`/posts/${post.id}.json`, post) commit('updatePost', { post: newPost }) }, async removeLikeLogToUser({ commit }, { user, post }) { post.likes = post.likes.filter(like => like.user_id !== user.id) || [] const newPost = await this.$axios.$put(`/posts/${post.id}.json`, post) commit('updatePost', { post: newPost }) } }
**app/pages/posts/_id.vue** <template> <section class="container posts-page"> <div style="flex: 1"> <el-card v-if="post"> <!---v-if---> <div slot="header" class="clearfix"> <h2> {{post.title}} </h2> <small>by {{post.user.id}}</small> </div> <p> {{post.body}} </p> <p class="text-right"> <el-button :disabled="!isLoggedIn" type="warning" v-if="isLiked" @click="unlike" round> <!---v-if---> <span class="el-icon-star-on" /> <span>{{post.likes.length}}</span> </el-button> <el-button :disabled="!isLoggedIn" type="warning" v-else @click="like" round> <span class="el-icon-star-off" /> <span>{{post.likes.length}}</span> </el-button> </p> <p class="text-right"> {{post.created_at | time}} </p> </el-card> <p> <nuxt-link to="/posts"> &lt; 投稿一覧へ戻る </nuxt-link> </p> </div> </section> </template> <script> import moment from '~/plugins/moment' import { mapGetters, mapActions } from 'vuex' import cloneDeep from 'lodash.clonedeep' export default { async asyncData({ store, route }) { if (store.getters['posts/posts'].find(p => p.id === route.params.id)) { return } await store.dispatch('posts/fetchPosts') }, computed: { post() { return this.posts.find(p => p.id === this.$route.params.id) }, isLiked() { if (!this.user) return false return this.post.likes.find(l => l.user_id === this.user.id) }, ...mapGetters(['user', 'isLoggedIn']), ...mapGetters('posts', ['posts']) }, methods: { like() { if (!this.isLoggedIn) { return } const likePayload = { user: this.user, post: this.post } this.addLikeToPost(cloneDeep(likePayload)) this.addLikeLogToUser(cloneDeep(likePayload)) }, unlike() { if (!this.isLoggedIn) { return } const likePayload = { user: this.user, post: this.post } this.removeLikeToPost(cloneDeep(likePayload)) this.removeLikeLogToUser(cloneDeep(likePayload)) }, ...mapActions(['addLikeLogToUser', 'removeLikeLogToUser']), ...mapActions('posts', ['addLikeToPost', 'removeLikeToPost']) }, filters: { time(val) { return moment(val).format('YYYY/MM/DD HH:mm:ss') } } } </script>

試したこと

エラー文を見るにidプロパティが定義されていないというようなエラーと思いログイン機能やユーザー登録機能周りのコードを技術書のサンプルコードと比較してみたのですが問題は見当たりませんでした。

また、このエラーについて調べてみたところログイン画面でログインするときにFirebaseのデータベースにユーザーが存在しないときにこのエラーが発生するようなのですがログインする以前(ローカルでアプリを立ち上げた時点)で発生していて何が問題なのかもわからないという状況です。

このエラーの解消法がお分かりの方がいらっしゃいましたらアドバイスの方よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

Cannot read property 'id' of undefined"

これで、idがないのか、とお思いでしょうが、逆に
なんたら.id のなんたらのナカミが異常とかnullとかnoneの場合もそういうエラーが出ます。

そっちの方をチェックしてみては

投稿2020/12/11 04:12

y_waiwai

総合スコア87747

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

jime1234567

2020/12/11 05:40

ご回答いただきありがとうございます。 つまりデータがおかしい(nullやnone)からこのエラーが出ているという認識で合っていますでしょうか。 ぼくの認識が合っているとしたら現状まだなにもデータも入れていないのでuser.id,post.id辺りがnullだからエラーが出ているかと思います。 その場合の対処としましては何らかの方法でデータを入れるということでよろしいのでしょうか?
y_waiwai

2020/12/11 05:52

提示のコードからは実際のデータがどうなってるかはわかりませんが、 そういうことになろうかとおもいます
jime1234567

2020/12/14 03:41

アドバイスをいただき、データについて調べつついじってみたのですがエラーは解消できず、データベースを新しくしても問題は解決されませんでした。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問