How to share data between two component in vuejs with Event Bus

Question

I am trying to implement a global event bus in order to send a variable from component A to component B.

Here is the component A code:

data () {
            return {                
            commandes: [],
            }
        },

envoyer() {                                 
                this.$eventBus.$emit('commande', this.commandes);
            }, 

Here is the component B code:

<template>
    <div class="container">
        <div class="row justify-content-center">
              <!-- Table row -->
              <div class="row">
                <div class="col-12 table-responsive">
                  <table class="table table-striped">
                    <thead>
                    <tr>
                      <th>Qté</th>
                      <th>Produit</th>
                      <th>Subtotal</th>
                    </tr>
                    </thead>
                    <tbody>
                      <tr v-for="(commande, index) in commandes" :key="index">
                        <td>{{ commande.quantite }}</td>
                        <td>{{ commande.produit_id }}</td>
                        <td>{{ commande.montant }}</td>
                      </tr>
                    </tbody>
                  </table>
                </div>
                <!-- /.col -->
              </div>
        </div>
    </div>
</template>

<script>
    export default {
      data() {
          return {
            commande: [],
          }
        },

        methods: {         
        },

        mounted() {
          this.$eventBus.$on('commande', (commandes) => {
            this.commande = commandes;
            console.log(commandes);
          })
        }
    }
</script>

I'm getting this error when component B is displayed:

[Vue warn]: Property or method "commandes" is not defined on the instance but referenced during render.

How to solve this?

Answer 1

In your template you are referencing commandes

<tr v-for="(commande, index) in commandes" :key="index">

but your data doesn't return it, it returns commande

data() {
   return {
    commande: [],
   }
}

Update your data and bus listeners:

data() {
   return {
    commandes: [],
   }
}

...

this.$eventBus.$on('commande', (commandes) => {
  this.commandes = commandes;
  console.log(commandes);
})