How to $emit from child to parent in Vuejs for reset data list

Question

I have a parent component that contains this code:

mounted() {             
  var self = this;

  this.getCandidates();
  this.$on('updateListCandidates', () => {
    self.getCandidates();
  });
 },

Thanks to this I can update my list by calling $emit ('updateListCandidates')

I have a child component that I import like this:

<DeleteCandidate :item="scope.row"></DeleteCandidate>

In this child component, I have a Destroy function. I ask it to refresh my list thanks to $emit once the element correctly deleted.

async destroyItem() {
        await this.deleteItem.delete(`candidates/${this.deletingItem.id}`)
          .then(() => {
            this.$emit('updateListCandidates');
            this.$message({
              message: `Candidate (${this.deletingItem.full_name}) correctly deleted.`,
              type: 'success'
            });
          });
      },

BUT it doesn't work.

Why ? And how to solve my problem?

If I do that in my parent component, it works. I think it's because I'm in a child component but I do not know at all how to do a $emit on a parent in this case

I specify that my candidate is deleted well. I do not have any error messages in the console.

Thank you

Answer 1

Firstly, why don't you remove this code

  this.$on('updateListCandidates', () => {
    self.getCandidates();
  });

and directly call getCandidates instead of doing $emit ('updateListCandidates') ?

Secondly, (the answer to your actual question) you must listen to event in direct parent and perform action there whenever you emit from child. Otherwise just emitting from child (and not listening in parent) will not effect anything. So you can do in parent

<DeleteCandidate :item="scope.row" @updateListCandidates="getCandidates"></DeleteCandidate>

I assume getCandidates is defined in parent.