私はVue3アプリに取り組んでいます。3つのネストされたコンポーネントがあります。ナビゲーションコンポーネント内にネストされたドロップダウンコンポーネント、コンテンツコンポーネント内にネストされたドロップダウンコンポーネントです。

ドロップダウンは、作成者によって祖父母コンポーネント内の投稿をフィルタリングする必要がMain.vueあります。

一度に1つのコンポーネントでgetPostsByUser(user)メソッドを上向きに出力しようとしました

孫コンポーネントUsersDropdown.vue

<template>
  <div class="dropdown">
    <button type="button" class="btn btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
       {{ label }}
    </button>
    <ul v-if="usersData?.length" class="dropdown-menu">
      <li v-for="user in usersData" :key="user.userId">
        <a class="dropdown-item" @click="handleClick(user)">{{ user.first_name }} {{ user.last_name }}</a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'UsersDropdown',
  props: {
    label: String,
    usersData: Object,
    user: Object
  },

  methods: {
    handleClick(user) {
      this.$emit('getPostsByUser', user.userId)
    }
  }
}
</script>

親コンポーネントNavigation.vue

<template>
    <div class="navigation">
        <UsersDropdown
            @getPostsByUser="$emit('getPostsByUser', user)"
            :label='"All users"' 
            :usersData='users'
        />
    </div>
</template>

<script>
    import UsersDropdown from './UsersDropdown'

    export default {
        emits: ['getPostsByUser'],
    }
</script>

祖父母コンポーネントMain.vue

<template>
  <div class="main">
    <Navigation 
        @getPostsByUser='getPostsByUser(user)'
            :label='"All users"' 
            :usersData='users' />
  </div>
</template>

<script>
import Navigation from './Ui/Navigation'

export default {
  name: 'Main',
  components: {
    Navigation
 },
  props: {
    title: String,
    tagline: String,
  },
  
  data() {
    return {
      userId: '',
      posts: [],
      // more code
    }
  },
  
  methods: {
      getPostsByUser(user) {
        // get user id
      this.userId = user.userId;
    },
  }
}
</script>

問題

私が理解できなかった理由で、Chromeコンソールはエラーをスローします:

未定義のプロパティを読み取ることができません('userId'を読み取る)

私の間違いはどこにありますか?

応答

UsersDropdown.vueuserIdを渡しMain.vue、ユーザーオブジェクト全体を待っている場合は、次のコマンドを試してくださいthis.userId = user;