Что вызывает эту ошибку при передаче объекта из основного компонента в дочерний компонент в приложении Vue 3?

Я работаю над приложением Vue 3. Я столкнулся с проблемой при работе с компонентом и одним из его <User /> подкомпонентов.

В App.vue:

<template>
  <Navbar />
  <Sidebar />
  <Content 
    title="Users"
  />
  <Footer />
</template>

<script>
import Navbar from './components/Navbar.vue'
import Content from './components/Content.vue'
import Sidebar from './components/Sidebar.vue'
import Footer from './components/Footer.vue'

export default {
  name: 'App',
  components: {
    Navbar,
    Content,
    Sidebar,
    Footer  
  },

  data() {
    return {
      url: 'https://jsonplaceholder.typicode.com',
      users: [],
    }
  },
  async mounted() {
    // Users
    await this.axios.get(`${this.url}/users`).then((response) => {
      if (response.data.code == 200) {
        this.users = response.data.data;
        console.log(this.users);
      }
    }).catch((errors) => {
      console.log(errors);
    });
  }
}
</script>

В Navbar.vue:

<template>
  <a class="navbar-brand" href="#">My App</a>
  <User :users='users' />
</template>

<script>
import User from './User.vue'

export default {
  name: 'Navbar',
    components: {
        User
    }
}
</script>

В User.vue я пытаюсь вывести полное имя пользователя, так как typeof(users) retuens object:

<template>
    {{ users.firstName }} {{ users.lastName }}
</template>

<script>
export default {
  name: 'User',
    props: {
    users: Object
  }
}
</script>

Эта проблема

Я получаю эту ошибку в консоли: Uncaught TypeError: Не удается прочитать свойства неопределенного (чтение «firstName»).

Где моя ошибка?

Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
0
0
21
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий
//in Navbar

<template>

  <a class="navbar-brand" href="#">My App</a>

    <User :users='usersData' />

</template>    

<script>
import User from './User.vue'

export default {
  name: 'Navbar',
    components: {
        User
    },
props:['usersData']
}
</script>

//в App.vue

<template>
  <Navbar :usersData="users" />
  <Sidebar />
  <Content 
    title="Users"
  />
  <Footer />
</template>

Другие вопросы по теме