How do I make a variable available to a grandchild component in this Vue 3 application?-CodePudding

I am working on a Vue 3 app. I have run into a problem working with a parent component, a child component and a grandchild component.

In Main.vue (parent compenent):

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

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

In the child compenent 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 the grandchild component MyDropdown.vue:

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

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

The problem

As long as v-if="usersData.length is present, I get this error in the console:

Cannot read properties of undefined (reading 'length')

Where is my mistake?

CodePudding user response：

First of all, if it is just avoiding your error in the MyDropDown grandchild component you can just add a ? after the usersData variable like v-if="usersData?.length". This will remove your Can't read length of undefined error.

Next is the way you're trying to pass your props from parent to the child component. You are passing your users data to usersData prop of the Filters component tag but are trying to get the props as filterData in the component, which will not work as expected. So users is considered with an undefined value and is being the same into your grandchild which is causing an error in your grandchild i.e. MyDropDown component.

Try mapping the prop names properly and avoid variable name repetition with that of the prop names inside any component.

If you are trying to send data from parent to grandchild directly you use the Provide/Inject feature of Vue.js.
Find more about it here Provide/Inject | Vue.js

CodePudding user response：

v-if="usersData?.length > 0"

try this or

v-if="usersData.length > 0"