Estoy trabajando en una aplicación Vue 3 . Me encontré con un problema al trabajar con un componente principal , un componente secundario y un componente secundario.
En Main.vue (componente principal):
<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> En el componente 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> En el componente nieto 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> Siempre que v-if="usersData.length esté presente, aparece este error en la consola:
No se pueden leer las propiedades de undefined (leyendo 'longitud')
En primer lugar, si solo está evitando su error en el componente MyDropDown , puede agregar un ? después de la variable usersData como v-if="usersData?.length" . Esto eliminará el error Can't read length of undefined .
La siguiente es la forma en que intenta pasar sus accesorios del componente principal al componente secundario. Está pasando los datos de sus users a la propiedad de datos de usersData de la etiqueta del componente Filters , pero está tratando de obtener las propiedades como datos de filterData en el componente, lo que no funcionará como se esperaba. Por lo tanto users se consideran con un valor undefined y están siendo iguales en su nieto, lo que está causando un error en su nieto, es decir, el componente MyDropDown .
Intente mapear los nombres de las propiedades correctamente y evite la repetición de nombres de variables con los nombres de las propiedades dentro de cualquier componente.
Si está intentando enviar datos de padre a nieto directamente, use la función Provide/Inject de Vue.js.
Obtenga más información aquí Proporcionar/Inyectar | Vue.js
v-if="usersData?.length > 0"prueba esto o
v-if="usersData.length > 0"