0

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.

  • 1
    Given the event is coming from the child, shouldn't `overall` be a parameter passed in the event, rather than set by the parent? – match Nov 19 '21 at 19:39
  • 3
    Does this answer your question? [Passing event and argument to v-on in Vue.js](https://stackoverflow.com/questions/40956671/passing-event-and-argument-to-v-on-in-vue-js) – match Nov 19 '21 at 19:42

0 Answers0