En primer lugar, gracias de antemano por leer y ayudar.
Estoy un poco perdido tratando de resolver esto. Actualmente tengo dos componentes desplegables que representan diferentes opciones de un objeto. Estoy renderizando dos menús desplegables. El segundo menú desplegable dependerá de la selección del primer menú desplegable.
Digamos que selecciono "BMW" en el primer menú desplegable, y solo debería representar "BMW 320i".
El objeto de datos se ve así:
{ "menu":[ { "id":"bmw", "name":"BMW" }, { "id":"volvo", "name":"Volvo" } ], "cars":[ { "id":"bmw320", "name":"BMW 320i" }, { "id":"volvoc70", "name":"Volvo C70" } ] }En mi plantilla tengo dos componentes secundarios que incluyen el menú desplegable. MenuDropdown incluye el contenido de dataContent.menu y CarDropdown incluye contenido de dataContent.cars .
<MenuDropdown :dataContent="dataContent"> <CarDropdown :dataContent="customDataContent">Las opciones del CarDropdown cambiarán dependiendo de la selección del primer menú desplegable (MenuDropdown). Así que estoy tratando de lograr esto usando una propiedad calculada:
computed: { customDataContent() { if (this.dataContent.menu.id === "bmw") { return this.dataContent.cars.filter(car => { return car.id === 'bmw320' }) } else { return this.dataContent } } }¡Gracias por la ayuda!
el método de filter devuelve una matriz, indícela con [0] o use Array.find() en su lugar
con encontrar
return this.dataContent.cars.find(car => car.id === 'bmw320')con filtro
return this.dataContent.cars.filter(car => car.id === 'bmw320')[0]