Как сделать переменную доступной для дочернего компонента в этом приложении Vue 3?

Я работаю над приложением Вью 3. Я столкнулся с проблемой при работе с родительский компонент, дочерним компонентом и компонент внука.

В Main.vue (родительский компонент):

<template>
    <div class="main">
        <h1>{{ title }}</h1>
        <Filters
         :usersData='users' 
        />
    </div>
</template>

<script>
    import Filters from './Ui/Filters'
    export default {
      name: 'Posts',
      components: {
        Filters
      },
      props: {
        title: String,
      },
    }
</script>

В ребенокFilters.vue:

<template>
    <label>Filter by author</label>
    <MyDropdown
        label="All authors" 
        :usersData='users'
        />
</template>

<script>
    import MyDropdown from './MyDropdown'
    import MyButton from './MyButton'

    export default {

      name: 'Filters',

      components: {
        MyDropdown,
        MyButton
      },

      props: {
        usersData: Object
     },

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

Tn компонент внука MyDropdown.vue:

<template>
  <div class="dropdown">
    <button type="button" class="btn btn-sm dropdown-toggle" data-bs-toggle="dropdown">
       {{ label }}
    </button>
    <ul v-if="usersData.length" class="dropdown-menu">
        <li><a class="dropdown-item" href="#">Jane Doe</a></li>
        <li><a class="dropdown-item" href="#">John Doe</a></li>
    </ul>
  </div>
</template>

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

Эта проблема

Пока присутствует v-if="usersData.length, я получаю эту ошибку в консоли:

Невозможно прочитать свойства неопределенного (чтение «длина»)

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

stackoverflow.com/a/65259675/8172857
Boussadjra Brahim 09.04.2022 23:26
Формы 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
1
80
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

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

Прежде всего, если вы просто избегаете своей ошибки в компоненте внука MyDropDown, вы можете просто добавить ? после переменной userData, например v-if="usersData?.length". Это устранит вашу ошибку Can't read length of undefined.

Далее вы пытаетесь передать свои реквизиты от родителя к дочернему компоненту. Вы передаете свои users данные в usersData prop тега компонента Filters, но пытаетесь получить свойства как filterData в компоненте, что не будет работать должным образом. Таким образом, users считается со значением undefined и совпадает с вашим внуком, что вызывает ошибку в вашем внуке, то есть компоненте MyDropDown.

Попробуйте правильно сопоставить имена свойств и избегайте повторения имен переменных с именами свойств внутри любого компонента.

Если вы пытаетесь отправить данные от родителя к внуку напрямую, вы используете функцию Provide/Inject Vue.js.
Подробнее об этом читайте здесь Обеспечить/внедрить | Vue.js

Спасибо за уместные замечания, я исправил проблему filterData. Я не настаиваю на передаче переменной от родителя к внуку напрямую, я просто хочу, чтобы она была во внуке самым простым и полным способом.

Razvan Zamfir 09.04.2022 23:43

Пожалуйста, помогите мне с этот вопрос тоже. Спасибо!

Razvan Zamfir 10.04.2022 19:57
v-if="usersData?.length > 0"

попробуй это или

v-if="usersData.length > 0"

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