I can get props to emit from the parent to child using this method:
// CHILD COMPONENT
methods: {
toggleClassification: function(classification, level) {
// Check if requested classification is already set
if(this.classifications[level]) return;
// Reset classifications
for(let i = 0; i < 4; i++){
if(this.classifications[i]) {
this.classifications[i] = false;
break;
}
}
// classification is defined at this point
this.$emit("ChangeClassification", classification);
...
},
// PARENT COMPONENT (Working)
<div>
...
<ClassificationBar @ChangeClassification="changeClassification" :classification="overallClassification"/>
...
</div>
methods: {
changeClassification(classification) {
// classification is defined here
console.log(classification);
},
There are multiple classification bars, however, so I want to associate the classification with the source of the change. There are multiple classification bars on the screen and it must know which div it came from. Is there a way I can accomplish this?
// PARENT COMPONENT (Not Working)
<div>
...
// tried passing parameter "overall" as the source of the change
<ClassificationBar @ChangeClassification="changeClassification(classification, 'overall')" :classification="overallClassification"/>
...
</div>
methods: {
changeClassification(classification, source) {
// classification is not defined but the source is
console.log(classification, source);
},
It appears that once I add parameters to the "changeClassification" function, classification is no longer defined. Any help on this would be greatly appreciated.