In my parent component, I have a data object named config structured like this:
data() {
return {
config: {
Groups: [
{
name: "A",
Types: [
{ mask: 1234, name: "Alice", type: 1},
{ mask: 5678, name "Bob", type: 1},
]
},
{
name: "B",
Types: [
{ mask: 9876, name: "Charlie", type: 2},
{ mask: 5432, name "Drake", type: 2},
]
}
],
},
Defaults: {
dummyBoolean: false,
dummyNumber: 1
}
}
}
}
Within this component, there are 2 child components for which I aim to pass the Types array from the config data based on each child component's name.
My initial approach involved creating separate computed functions for each child component, but I'm now seeking a more efficient solution, considering the potential addition of more child components.
- One solution I attempted was to have a single
computedfunction that takes the component's name as an argument, but encountered an error (dataSender is not a function)
computed: {
dataSender: function(groupName) {
let array= []
this.config.Groups.forEach( element => {
if (element.name === groupName) array = element.Types
});
return array
},
}
- Another approach involved placing the function in
methodsand passing it as a prop to the child components, but this resulted in passing the function itself rather than the desired array.
If anyone has a solution for this issue, I would greatly appreciate the assistance.